Generator gradientów
Generator gradientów CSS tworzy gradienty liniowe, radialne i stożkowe z dwóch lub trzech kolorów, z podglądem na żywo i gotowym do skopiowania CSS-em tła.
O tym narzędziu
Generator gradientów CSS tworzy gradienty liniowe, radialne i stożkowe z dwóch lub trzech kolorów, z podglądem na żywo i gotowym do skopiowania CSS-em tła.
Jak używać
- Wybierz rodzaj gradientu: linear, radial lub conic.
- Ustaw kąt suwakiem (0–360°).
- Wybierz dwa kolory albo zaznacz Use 3 colors, aby dodać trzeci.
- Kliknij Copy CSS i wklej regułę background do arkusza stylów.
Warto wiedzieć
- linear-gradient() przenika kolory wzdłuż prostej wyznaczonej kątem, gdzie 90deg biegnie od lewej do prawej.
- radial-gradient(circle, …) rozchodzi się kolorami od środka na zewnątrz.
- conic-gradient(from <angle>, …) obraca kolory wokół punktu środkowego, co przydaje się przy wykresach kołowych i kołach barw.
- Gradienty CSS to obrazy rysowane przez przeglądarkę, więc skalują się do dowolnego rozmiaru bez dodatkowej wagi plików.
- Wszystkie trzy funkcje gradientów są obsługiwane w każdej aktualnej popularnej przeglądarce.
Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.
Najczęściej zadawane pytania
Jak zrobić gradient w CSS?
Użyj funkcji gradientu jako tła, np. background: linear-gradient(135deg, #1db954, #0a1628). To narzędzie napisze tę linię za Ciebie na podstawie wybranych kolorów i kąta.
Czym różnią się gradienty linear, radial i conic?
Gradienty liniowe zmieniają kolor wzdłuż linii, radialne rozchodzą się od punktu środkowego, a stożkowe obracają się wokół środka jak wskazówki zegara.
Czy gradient może mieć więcej niż dwa kolory?
Tak. Gradienty CSS przyjmują dowolną liczbę punktów koloru. Ten generator obsługuje dwa lub trzy kolory; kolejne punkty możesz dopisać ręcznie w skopiowanym CSS.
Czy gradienty CSS spowalniają stronę?
Nie w zauważalny sposób. Rysuje je przeglądarka i nie wymagają pobierania obrazu, więc zwykle są lżejsze niż pliki graficzne z gradientem.