Generator gradientów CSS

Jak korzystać z generatora gradientów CSS

1. Wybierz Typ gradientu: Liniowy, Radialny lub Stożkowy. Duży podgląd u góry aktualizuje się przy każdej zmianie.
2. W gradiencie liniowym ustaw Kąt suwakiem lub wpisz go w stopniach (90° biegnie od lewej do prawej, 180° od góry do dołu). W gradiencie stożkowym kąt wskazuje, gdzie zaczyna się obrót.
3. W gradientach radialnych i stożkowych przesuwaj środek polami Środek X i Środek Y. Gradient radialny może mieć postać Koło lub Elipsa (menu Kształt).
4. Edytuj Punkty koloru. Kliknij w dowolnym miejscu paska, aby dodać tam punkt w kolorze, jaki gradient ma już w tym miejscu, albo użyj przycisku Dodaj punkt, aby wypełnić największą lukę. Przeciągnij uchwyt, aby go przesunąć. Każdy punkt ma też własny wiersz, w którym możesz wybrać jego kolor, wpisać dowolny kolor CSS, ustawić Pozycja (%) albo go usunąć przyciskiem Usuń (gradient zawsze zachowuje co najmniej dwa punkty).
5. Opcjonalnie zaznacz Powtarzany, wybierz Interpolacja kolorów, kliknij Odwróć, aby odwrócić kolejność punktów, albo Losowy gradient, by poszukać inspiracji.
6. Skopiuj wynik z pola Kod CSS przyciskiem Kopiuj.

Klawiatura: ustaw fokus na uchwycie na pasku i przesuwaj go strzałkami o 1% (o 10% z Shift), klawiszami Home i End przeskakuj na końce, a klawiszem Delete usuń punkt.

Trzy funkcje gradientu

• linear-gradient() łączy kolory wzdłuż linii prostej. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) biegnie od indygo po lewej do różu po prawej. Kąty liczy się zgodnie z ruchem wskazówek zegara od góry: 0deg wskazuje w górę, 90deg w prawo.
• radial-gradient() rozchodzi się od punktu środkowego. radial-gradient(circle at 30% 40%, …) umieszcza środek 30% od lewej i 40% od góry. Elipsa rozciąga się wraz z elementem, koło pozostaje okrągłe.
• conic-gradient() obraca się wokół środka jak wskazówki zegara. conic-gradient(from 0deg at 50% 50%, …) pozwala tworzyć koła barw, wykresy kołowe i efekty ładowania. Pozycje punktów to części pełnego obrotu.

Opcja Powtarzany używa repeating-linear-gradient() i pokrewnych funkcji: wzór wyznaczony przez punkty powtarza się, aż wypełni cały element. Ustaw ostatni punkt znacznie poniżej 100% (np. 20%), aby zobaczyć paski lub pierścienie.

Dwa punkty w tej samej pozycji tworzą ostrą krawędź zamiast przejścia – tak powstają paski i flagi. Generator utrzymuje w kodzie punkty posortowane według pozycji, jak wymaga tego CSS.

Interpolacja sRGB czy OKLCH

Domyślnie przeglądarki mieszają kolory gradientu w sRGB. Między dwoma nasyconymi kolorami, np. niebieskim i żółtym, często powstaje wtedy matowy szary lub „brudny” środek. CSS Color Level 4 pozwala wybrać przestrzeń interpolacji: linear-gradient(90deg in oklch, …) miesza kolory w percepcyjnej przestrzeni OKLCH i zachowuje żywy środek.

Przy opcji OKLCH (płynniejsza, z rezerwą sRGB) narzędzie zapisuje dwie deklaracje background: najpierw klasyczną wersję sRGB, potem wersję OKLCH. Przeglądarki obsługujące przestrzenie interpolacji (Chrome i Edge 111+, Safari 16.2+, Firefox 127+) używają drugiej linii; starsze ją ignorują i zostają przy pierwszej.

Wskazówki

• W polach punktów akceptowane są kolory z przezroczystością, np. #00000080 lub rgb(0 0 0 / 50%), co przydaje się przy nakładkach na zdjęcia.
• Kod jest zapisywany z właściwością background. Użyj zamiast niej background-image, jeśli inne właściwości tła ustawiasz osobno.
• Subtelne gradienty (dwa bliskie odcienie jednego koloru) zwykle wyglądają bardziej profesjonalnie niż tęczowe przejścia.