Generator gradientów CSS
Generuj piękne gradienty liniowe i radialne CSS z podglądem na żywo
Twoje pliki nigdy nie opuszczają przeglądarki. Nic nie jest wysyłane na żaden serwer. Polityka prywatności
Twórz wizualnie gradienty linear, radial i conic CSS — dodawaj dowolnie wiele color stopów, zmieniaj kolejność, ustawiaj kąt i kopiuj gotowy CSS w kilka sekund. Z gotową kolekcją popularnych gradientów na inspirację.
Jak stworzyć gradient CSS
1
Wybierz typ
Liniowy, Radial lub Conic.
2
Dodaj stopy
Klikaj +, aby dodać stop, przeciągaj pozycje lub wybierz preset.
3
Skopiuj CSS
Skopiuj wygenerowane background-image i wklej w CSS.
Liniowy, radial, conic
Wszystkie typy gradientów CSS z pełną kontrolą nad stopami i kierunkiem.
Dowolna liczba stopów
Dodawaj, usuwaj i zmieniaj kolejność stopów — każdy z własną pozycją.
Wyselekcjonowane presety
Przeglądaj popularne gradienty, aby zacząć od dopracowanej bazy.
Kopiowanie CSS
Skopiuj czysty CSS, gotowy do wklejenia w stylach lub Figmie.
FAQ
linear-gradient, radial-gradient i conic-gradient — pełen standardowy zestaw.
Tak. Wyjście używa standardowego CSS-a, który działa we wszystkich nowoczesnych przeglądarkach.
Brak twardego limitu — dodawaj tyle, ile potrzeba do wyrażenia gradientu.
Tak. Połącz background-image z background-clip: text i color: transparent dla gradientowego tekstu.
Tak. Gradienty CSS są akcelerowane GPU i renderują się wydajnie nawet na mobile.