Generator gradientów CSS

Jak to działa

Gradienty zapisuje się w CSS jako pojedynczą deklarację, której składnię łatwo źle zapamiętać, zwłaszcza konwencję kąta i miejsce punktów koloru. Oglądanie wyniku podczas dostosowywania jest szybsze niż przeładowywanie strony w celu sprawdzenia.

Konwencja kąta zaskakuje ludzi

W CSS 0 stopni wskazuje w górę, a kąt rośnie zgodnie z ruchem wskazówek zegara, więc 90 stopni biegnie od lewej do prawej, a 180 stopni od góry do dołu. To różni się od konwencji matematycznej i od kilku narzędzi projektowych, dlatego gradient skopiowany z innego miejsca często wychodzi obrócony.

Trzy typy

Liniowy biegnie wzdłuż prostej linii i pokrywa niemal każde realne zastosowanie. Radialny rozchodzi się od punktu na zewnątrz, co pasuje do poświat i reflektorów. Stożkowy omiata wokół środka i z niego buduje się wykresy kołowe i koła kolorów.

Gradient to obraz, a nie kolor

To druga rzecz, na której ludzie się potykają. CSS traktuje gradient jako obraz tła, więc działa w background i background-image, ale nie w color, border-color ani niczym innym, co oczekuje zwykłego koloru. Gradienty na tekście wymagają background-clip, co jest osobną techniką.

Dodawanie środkowego koloru

Dwa punkty dają czyste przejście. Trzeci pozwala poprowadzić przejście przez inny odcień, co unika brudnej szarości pojawiającej się, gdy dwa przeciwległe kolory mieszają się bezpośrednio.