Jak wygenerować ładny gradient CSS dla strony?
Generator gradientów CSS - linear, radial, conic - z opcją interpolacji w OKLCH (perceptualnie równa) zamiast sRGB.
Kluczowa różnica: gradienty w OKLCH nie mają "brudnego szarego" pośrodku jak sRGB - przejście blue→yellow w sRGB idzie przez muddy gray, w OKLCH przez czysty cyan/green.
Wybierz typ, ustaw stopy, kąt - dostań gotowy kod CSS i Tailwind. Wszystko lokalnie.
Jak korzystać
- Wybierz typ: Linear (linia), Radial (od środka), Conic (od kąta jak tarcza zegara). Linear i Conic mają slider kąta 0-360°.
- Każdy stop ma: kolor (HEX, color-picker), pozycję 0-100%, X do usunięcia. Klik "Dodaj stop" - generator wstawi nowy w największej luce. Max 8 stopów.
- Wybierz interpolację: sRGB (klasyczna, czasem brudne pośrednie kolory) lub OKLCH (perceptualna, czystsze przejścia). Dla profesjonalnych prac zostaw OKLCH.
- CSS i Tailwind generują się na żywo. Klik "Kopiuj" = gotowy kod do schowka.
- 6 presetów u dołu (Sunset, Ocean, Forest, Aurora, Ice, Mono) - dobry start.
Do czego się przydaje
Gdzie generator gradientów się przyda - typowe miejsca:
- Hero sekcje stron - każda landing page potrzebuje wyrazistego gradientu.
- Brand - gradient z dwóch brand colors = spójny styl.
- Tła aplikacji - subtelny gradient sprawia, że plain UI wygląda premium.
- Buttony - subtelny radial gradient na hover dodaje "życia".
- Karty - conic gradient jako "shimmer" effect (loading state).
- Email templates - HTML email obsługuje gradients od 2020.
- Designerzy migrujący do OKLCH - porównaj sRGB vs OKLCH side-by-side i zobacz różnicę przy gradientach uzupełniających się kolorów (najwięcej widać przy blue→yellow, red→green).
Pytania i odpowiedzi
Bo przeglądarka natywnie interpoluje stopy w sRGB. Żeby uzyskać OKLCH-perceptualny efekt, wstawiamy 10 dodatkowych pośrednich stopów w każdym segmencie - przeglądarka linijkuje między nimi, a wynik jest praktycznie identyczny z prawdziwą OKLCH-interpolacją. CSS Color Level 4 ma natywną składnię "in oklch", ale wsparcie ciągle ograniczone (Chrome 113+, Safari 16.4+, Firefox 113+).