Punkty koloru
Kod wynikowy CSS
Gotowe zestawy
Kliknij motyw, aby natychmiast załadować skonfigurowany gradient.
Jak to działa i składnia CSS
To narzędzie wizualnie buduje standardowe właściwości CSS `background-image` przy użyciu funkcji gradientów. Gdy dodajesz kolory i zmieniasz pozycje, generator oblicza dokładną składnię potrzebną dla nowoczesnych przeglądarek.
Gradienty liniowe
Gradient liniowy (linear gradient) płynnie przechodzi między kolorami wzdłuż linii prostej. Składnia to:
linear-gradient(kąt, kolor1 pozycja1, kolor2 pozycja2, ...)
Kąt (angle) określa kierunek (np. 90deg to przejście od lewej do prawej). Pozycja określa punkt, w którym kolor osiąga swoją czystą postać (od 0% do 100%).
Gradienty radialne
Gradient radialny przechodzi między kolorami na zewnątrz od centralnego punktu. Składnia to:
radial-gradient(kształt at pozycja, kolor1 poz1, kolor2 poz2, ...)
Kształt (shape) może być kołem (circle) lub elipsą (ellipse). To narzędzie domyślnie ustawia pozycję na środku (center) elementu.
Gradienty stożkowe
Gradient stożkowy (conic gradient) przechodzi między kolorami obracając się wokół centralnego punktu, podobnie jak wykres kołowy. Składnia to:
conic-gradient(from kąt at center, kolor1 poz1, kolor2 poz2, ...)
Gradienty stożkowe doskonale nadają się do tworzenia kół kolorów, wykresów kołowych i złożonych wzorów kątowych.