Tło sekcji hero albo CTA bez wypalania w obrazek. Stany hover na przyciskach albo kartach, które wyglądają "nowocześnie" bez assetu graficznego. Mockowanie overlaya w kolorach marki (gradient + półprzezroczysty solid dla czytelności tekstu). Ozdobne dividery, tła w stylu mesh albo animowane wypełnienia SVG.

Linear — kolory przechodzą wzdłuż prostej linii pod wybranym kątem (0° = z dołu do góry, 90° = z lewej do prawej, 180° = z góry do dołu). Radial — kolory rozchodzą się z punktu centralnego na zewnątrz w kształcie koła albo elipsy. Świetne do efektów spotlight albo winiety.

Używaj jako background , nie background-color . Gradienty są obrazami, nie kolorami. background-color jest ignorowane. Stopy muszą być w kolejności dla przewidywalnego renderowania. Narzędzie sortuje je automatycznie — jeśli kopiujesz CSS i edytujesz ręcznie, trzymaj procenty monotoniczne. Hard stops (dwa stopy w tym samym procencie) tworzą ostrą granicę zamiast przejścia — przydatne do efektów paskowych albo bandowych. Banding na dużych powierzchniach. Długie, niskokontrastowe gradienty mogą pokazywać widoczne "pasy" na 8-bitowych ekranach. Dodaj subtelny overlay SVG noise ( filter: url(#noise) ) albo lekko przesuń stopy. Wydajność. Przeglądarki malują gradienty szybko, ale animowanie background-image wywołuje paint co klatkę — animuj transform na warstwie nad, zamiast tego. Dostępność. Jeśli tekst leży na gradiencie, sprawdź współczynnik kontrastu w najgorszym punkcie gradientu, gdzie tekst się pojawia, nie średnią.

Generator Gradientów CSS

Buduj liniowe i radialne gradienty CSS wizualnie. Edytuj color stopy, kopiuj CSS gotowy do wklejenia.

Typ

Angle 90°

Color stops

Preview

CSS

Do czego to służy?

Gradienty CSS to jedna linia CSS, która rysuje płynne przejścia kolorów dla teł, przycisków, hero panelów i overlayów — bez żadnego pliku obrazu. Składnia jest potężna, ale upierdliwa do pisania ręcznie: kąty, color stopy w procentach, warianty repeating, mieszanie linear z radial. To narzędzie daje wizualny builder, który odzwierciedla CSS w czasie rzeczywistym, więc możesz przeciągnąć stop na miejsce i skopiować dokładny string linear-gradient(...) albo radial-gradient(...).

Kiedy tego użyć

Tło sekcji hero albo CTA bez wypalania w obrazek.
Stany hover na przyciskach albo kartach, które wyglądają "nowocześnie" bez assetu graficznego.
Mockowanie overlaya w kolorach marki (gradient + półprzezroczysty solid dla czytelności tekstu).
Ozdobne dividery, tła w stylu mesh albo animowane wypełnienia SVG.

Linear vs radial

Linear — kolory przechodzą wzdłuż prostej linii pod wybranym kątem (0° = z dołu do góry, 90° = z lewej do prawej, 180° = z góry do dołu).
Radial — kolory rozchodzą się z punktu centralnego na zewnątrz w kształcie koła albo elipsy. Świetne do efektów spotlight albo winiety.

Częste pułapki

Używaj jako background, nie background-color. Gradienty są obrazami, nie kolorami. background-color jest ignorowane.
Stopy muszą być w kolejności dla przewidywalnego renderowania. Narzędzie sortuje je automatycznie — jeśli kopiujesz CSS i edytujesz ręcznie, trzymaj procenty monotoniczne.
Hard stops (dwa stopy w tym samym procencie) tworzą ostrą granicę zamiast przejścia — przydatne do efektów paskowych albo bandowych.
Banding na dużych powierzchniach. Długie, niskokontrastowe gradienty mogą pokazywać widoczne "pasy" na 8-bitowych ekranach. Dodaj subtelny overlay SVG noise (filter: url(#noise)) albo lekko przesuń stopy.
Wydajność. Przeglądarki malują gradienty szybko, ale animowanie background-image wywołuje paint co klatkę — animuj transform na warstwie nad, zamiast tego.
Dostępność. Jeśli tekst leży na gradiencie, sprawdź współczynnik kontrastu w najgorszym punkcie gradientu, gdzie tekst się pojawia, nie średnią.