Generator gradientów CSS

Liniowy przechodzi wzdłuż prostej i to jego ma na myśli większość ludzi. Promienisty rozchodzi się z punktu na zewnątrz niczym poświata. Stożkowy omiata wokół punktu, zamiast oddalać się od niego, i to właśnie dzięki niemu koła barw i wycinki wykresu kołowego są możliwe w czystym CSS-ie.

Zwykle nie. Pozostawione puste, przeglądarka rozkłada punkty równo, czego przez większość czasu właśnie chcesz, a CSS zostaje krótki i łatwy do późniejszej edycji. Ustaw je ręcznie, gdy chcesz, żeby kolor trzymał się dłużej, albo gdy chcesz twardą granicę między dwoma.

Nadaj dwóm punktom tę samą pozycję. Gradient idący od jednego koloru na 50 procentach do drugiego również na 50 procentach zmienia się natychmiast, zamiast się mieszać. Połącz to z trybem powtarzania, a masz paski zupełnie bez pliku graficznego.

Każdy kolor jest odczytywany i zapisywany na nowo, a nie przepuszczany bez zmian. Dzięki temu na wyjściu zostaje poprawny kolor i nic poza nim, co ma znaczenie, bo wartość trafia do arkusza stylów. Kolor, którego nie da się zrozumieć, jest odrzucany, a nie po cichu dołączany.

Liniowy i promienisty działają wszędzie od wielu lat. Stożkowy jest nowszy, ale obsługują go wszystkie obecne przeglądarki. Jeśli musisz obsłużyć coś bardzo starego, generator pokazuje też jednolity kolor, który możesz ustawić wcześniej jako zapasowy.