CSS Gradient Generator
Create CSS gradients
Create CSS gradients Działa lokalnie w Twojej przeglądarce
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
Generator gradientów CSS tworzy prawdziwy gradient liniowy lub promieniowy z dwóch kolorów i kąta, wyświetla go w pełnym rozmiarze i podaje CSS. Kąt to część, którą ludzie błędnie odczytują: w CSS 0 stopni wskazuje w górę, a kierunek obraca się zgodnie z ruchem wskazówek zegara, więc 90 stopni biegnie od lewej do prawej, a 180 stopni od góry do dołu. Jeśli popełnisz błąd, gradient często wygląda odwrócony za pierwszym razem. Obydwa kolory mogą mieć ośmiocyfrową wartość alfa, czyli sposób zanikania gradientu na obrazie bohatera.
Where people use the
- Tworzenie tła bohatera, które przechodzi pomiędzy dwoma kolorami marki.
- Testowanie, który kąt wygląda dobrze, przed zatwierdzeniem go w kodzie.
- Tworzenie subtelnego pionowego gradientu dla karty lub przycisku.
- Tworzenie półprzezroczystej nakładki przyciemniającej zdjęcie.
How to use the
- 1
Wybierz kolory początku i końca
Użyj próbnika kolorów lub wpisz wartość szesnastkową. Podgląd i aktualizacja CSS w miarę ich zmiany.
- 2
Wybierz liniowy lub promieniowy
Liniowy przebiega przez pudełko pod wybranym kątem. Promieniowo rozprzestrzenia się na zewnątrz od środka w kształcie koła.
- 3
Ustaw kąt
Przeciągnij suwak od 0 do 360 stopni. Pamiętaj, że 0 stopni w górę, 90 stopni w prawo, 180 stopni w dół i 270 stopni w lewo.
- 4
Skopiuj CSS
Regułą jest deklaracja tła, którą możesz wkleić bezpośrednio do arkusza stylów lub, jeśli wolisz, do właściwości obrazu tła.
Wskazówki i najlepsze praktyki
- Preferuj niewielką różnicę w jasności w przypadku tła zawierającego tekst; czyta się to raczej jako teksturę niż rozproszenie.
- W przypadku tekstu znajdującego się na gradiencie sprawdź kontrast w najjaśniejszych i najciemniejszych punktach, a nie tylko średni.
- Utrzymuj nachylenia do dwóch lub trzech przystanków; więcej wydaje się wyglądać na błotniste.
Często zadawane pytania
W którą stronę skierowany jest kąt?
Zero stopni wskazuje na górę elementu, a kąt zwiększa się zgodnie z ruchem wskazówek zegara. Zatem 90 stopni idzie w prawo, a 180 stopni w dół. Jest to sprzeczne z intuicją, jeśli jesteś przyzwyczajony do obliczania kątów mierzonych w kierunku przeciwnym do ruchu wskazówek zegara od prawej strony.
Dlaczego mój gradient wygląda na paskowany?
Ponieważ dwa kolory o zbliżonej luminancji dają widoczne kroki na 8-bitowym wyświetlaczu, zwłaszcza na dużym obszarze. Dodanie subtelnego trzeciego stopnia lub zastosowanie nieco szerszego zakresu luminancji zwykle to ukrywa.
Czy mogę użyć przezroczystości?
Tak. Użyj ośmiocyfrowej wartości szesnastkowej, takiej jak 667eea00 dla pełnej przejrzystości lub 667eea80 dla połowy, a gradient zaniknie nad tym, co znajduje się za nim.
Czy gradient jest wszędzie obsługiwany?
Gradienty liniowe i promieniowe są obsługiwane w każdej aktualnej przeglądarce bez przedrostka. Prefiksy dostawców są potrzebne tylko w przypadku bardzo starych wersji Safari i Androida, co w praktyce oznacza, że nie powstały one po około 2015 roku.
Dlaczego mój gradient się nie wyświetla?
Ponieważ element nie ma wysokości. Gradient jest malowany w pudełku elementu, więc pusty element div zapada się do zerowej wysokości i nic nie pokazuje. Ustaw wysokość lub dodaj zawartość.
Czy generuje więcej niż dwa przejścia kolorów?
Nie, to narzędzie obsługuje dwa. W przypadku gradientu z wieloma przystankami weź utworzony CSS i ręcznie dodaj przystanki; składnia to po prostu więcej par kolorów i wartości procentowych oddzielonych przecinkami.