Generator Gradientów CSS Online
Twórz gradienty CSS z podglądem na żywo. Bez instalacji, bezpłatnie.
background: linear-gradient(135deg, #667eea, #764ba2);
Dlaczego warto
Idealne gradienty CSS w kilka sekund
Podgląd na żywo
Widzisz wynik na bieżąco podczas dostosowywania kolorów, kątów i pozycji.
Kod gotowy do wdrożenia
Nowoczesna składnia CSS. Bez zbędnych prefiksów vendor.
Zgodność z przeglądarkami
Sprawdź zgodność i uzyskaj poprawny kod dla docelowych przeglądarek.
Bez instalacji
Wszystko w przeglądarce. Nie potrzebujesz Figmy, Sketcha ani żadnych wtyczek.
Jak to działa
Trzy kroki, żadnych komplikacji
Wybierz typ gradientu
Wybierz spośród linear-gradient, radial-gradient lub conic-gradient. Każdy typ ma własne, specyficzne kontrolki.
Skonfiguruj kolory i pozycje
Dodaj tyle color stops, ile potrzebujesz. Dostosuj kąt, pozycję środka i procent dla każdego koloru za pomocą wizualnych kontrolek.
Skopiuj kod CSS
Kod CSS jest generowany w czasie rzeczywistym. Skopiuj kompletną właściwość background gotową do wklejenia do arkusza stylów.
FAQ
Masz pytania?
Gradient liniowy (linear-gradient) przechodzi między kolorami wzdłuż prostej linii pod określonym kątem. Gradient radialny (radial-gradient) promieniuje od punktu centralnego na zewnątrz w kształcie kołowym lub eliptycznym. Gradient stożkowy (conic-gradient) przechodzi wokół punktu centralnego jak wskazówki zegara — idealny do wykresów kołowych lub efektów obracającego się koloru w czystym CSS.
Użyj rgba() lub słowa kluczowego 'transparent' jako color stop. Na przykład: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)) tworzy gradient od pełnego czerwonego do całkowicie przezroczystego czerwonego. Unikaj używania 'transparent' bezpośrednio w gradientach na ciemnym tle, ponieważ przeglądarki interpolują przez czerń (rgba(0,0,0,0)), tworząc niepożądany szarawy artefakt.
Gradienty liniowe i radialne są obsługiwane we wszystkich nowoczesnych przeglądarkach od 2012 roku (Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+). Gradienty stożkowe są nowsze: obsługiwane od Chrome 69 (2018), Firefox 83 (2020) i Safari 12.1 (2019). Dla projektów wymagających obsługi IE11 gradienty CSS nie mają natywnego fallbacku — użyj obrazów SVG jako alternatywy.
Dodaj wiele color stops: linear-gradient(45deg, #ff0000 0%, #ff7700 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). Kontroluj dokładną pozycję każdego koloru za pomocą procentów lub wartości bezwzględnych (px, em). Jeśli nie podasz pozycji, kolory zostaną rozmieszczone równomiernie.
Gradienty CSS są generowane przez GPU przeglądarki i nie wymagają żądania sieciowego, co czyni je znacznie wydajniejszymi niż obrazy. Jednak bardzo złożone gradienty CSS z wieloma color stops mogą wpływać na wydajność odmalowywania strony. W przypadku animowanych gradientów wydajność może się pogorszyć na słabszych urządzeniach mobilnych — rozważ zamiast tego użycie transform lub opacity, które są właściwościami akcelerowanymi przez GPU i nie powodują reflow.
Gradienty CSS: historia specyfikacji W3C i zaawansowane techniki
Gradienty CSS mają złożoną historię standaryzacji. Pierwsze implementacje pojawiły się jako rozszerzenia własnościowe: -webkit-gradient() w Safari 4 (2008) ze składnią zupełnie odmienną od nowoczesnej. Mozilla zaimplementowała -moz-linear-gradient() w Firefox 3.6 (2010). Nowoczesna, znacznie bardziej intuicyjna składnia została wprowadzona w module CSS Images Level 3 W3C, osiągając status Candidate Recommendation w 2011 roku i obsługę bez prefiksów w Chrome 26 i Firefox 16 w 2012 roku. Funkcja conic-gradient() została zaproponowana przez Leę Verou w 2015 roku i ustandaryzowana w CSS Images Level 4.
Gradienty CSS są renderowane całkowicie na GPU przez warstwę kompozytora przeglądarki, w przeciwieństwie do rasteryzowanych obrazów wymagających wcześniejszego dekodowania przez CPU. Czyni to je szczególnie wydajnymi dla dużych obszarów tła. Wewnętrznie silnik renderowania (Skia w Chrome/Edge, WebRender w Firefox) oblicza interpolację kolorów domyślnie w przestrzeni kolorów sRGB. CSS Color Level 4 wprowadza interpolację w innych przestrzeniach kolorów (oklch, display-p3), umożliwiając tworzenie bardziej jednorodnych percepcyjnie gradientów bez niepożądanego pasmowania kolorów.
Zaawansowaną techniką jest 'gradient halftone', który wykorzystuje wiele warstw tła do tworzenia wzorów kropkowych. Inną jest użycie gradientów jako masek CSS z mask-image: linear-gradient(), umożliwiające zanikanie elementów bez JavaScript. Dla efektów tekstowych z gradientem łączy się background-clip: text z color: transparent — technika spopularyzowana w nowoczesnym projektowaniu UI od 2015 roku, szeroko stosowana w interfejsach Apple, Google i Meta. Gradienty są też fundamentem 'neumorfizmu' i 'glassmorfizmu', dominujących trendów projektowych z lat 2019–2023.