Jak używać

Wybierz gradient liniowy, radialny lub stożkowy, a następnie ustaw kąt albo pozycję środka.
Ustaw kolor, krycie i położenie każdego punktu. Dodaj maksymalnie sześć punktów lub usuń te, których nie potrzebujesz.
Sprawdź podgląd, a następnie skopiuj wiersz CSS do arkusza stylów.

Jak to działa

Wynikiem jest standardowa deklaracja CSS background. Gradienty liniowe biegną wzdłuż określonego kąta: 0deg oznacza kierunek od dołu do góry, 90deg — od lewej do prawej, a 180deg — od góry do dołu. Gradienty radialne rozchodzą się od punktu środkowego w kształcie koła lub elipsy dopasowanej do obszaru. Gradienty stożkowe obracają się wokół punktu środkowego, zaczynając od wybranego kąta. Przydają się do uzyskania efektu przypominającego wykres kołowy lub koło barw.

Punkty koloru są zapisywane w kolejności ich położenia, więc możesz swobodnie przeciągać je w inne miejsca. Punkt o zmniejszonej kryciu jest zapisywany jako rgba(), co pozwala widzieć tło. Dwa punkty w tym samym miejscu tworzą ostrą granicę zamiast płynnego przejścia — w ten sposób powstają pasy.

Wszystkie trzy funkcje gradientów działają we wszystkich aktualnych przeglądarkach. Domyślnie gradienty przechodzą między kolorami w przestrzeni barw sRGB, co może powodować, że kolory pośrednie między barwami dopełniającymi (na przykład niebieskim i żółtym) będą wyglądać na lekko szare. Dodanie pośrodku jaśniejszego koloru pozwala tego uniknąć.

Przykłady

Delikatne tło nagłówka

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) tworzy łagodne przejście od góry do dołu, na którym ciemny tekst pozostaje czytelny.

Pasy z ostrymi krawędziami

Użyj czterech punktów: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. Dwa punkty na pozycji 50% stykają się bez płynnego przejścia, tworząc dwie jednolite połowy.

Efekt reflektora

Gradient radialny (koło w lewym górnym rogu) od rgba(255, 255, 255, 0.6) do rgba(255, 255, 255, 0), nałożony na kolor, tworzy delikatną poświatę w rogu.

Często zadawane pytania

W którym kierunku biegnie gradient przy 0deg?

W CSS kąt 0deg wskazuje w górę, więc gradient zaczyna się na dole i kończy u góry. Kąt 90deg oznacza kierunek od lewej do prawej. To inaczej niż w niektórych aplikacjach do projektowania, w których 0° często oznacza kierunek od lewej do prawej.

Czy mogę zastosować gradient do tekstu?

Tak: ustaw tło, a następnie dodaj background-clip: text i color: transparent. Upewnij się, że tekst pozostaje czytelny na tle strony w każdym miejscu gradientu.

Czy potrzebuję prefiksów dostawców, takich jak -webkit-linear-gradient?

Nie. Aktualne przeglądarki obsługują składnię bez prefiksów. Prefiksy są potrzebne tylko w przeglądarkach sprzed wielu lat.

Prywatność

Wszystko jest generowane w przeglądarce. Twoje kolory i ustawienia nie są wysyłane ani zapisywane.