Generator gradientów CSS
Ukształtuj gradient wizualnie, a potem skopiuj CSS, który działa w każdej nowoczesnej przeglądarce.
Zapieczętowane na tym urządzeniu
Działa w przeglądarce. Nic nie jest wysyłane.
Zapieczętowane
Podgląd
Punkty koloru
Przeciągaj punkty albo wybierz jeden i użyj klawiszy strzałek. Kliknij pasek, aby dodać punkt.
Ustawienia
OKLCH i OKLab unikają szarej, zgaszonej strefy w środku niektórych gradientów. Dla starszych przeglądarek dołączana jest wersja standardowa.
Kod CSS
Jak to działa
-
Wybierz typ
Wybierz gradient liniowy, radialny lub stożkowy albo zacznij od szablonu, a potem ustaw kąt lub środek.
-
Edytuj kolory
Przeciągaj punkty koloru wzdłuż paska, klikaj pasek, aby dodać kolejne, i zmieniaj kolor oraz pozycję każdego punktu.
-
Skopiuj CSS
Skopiuj wygenerowany kod i wklej go do arkusza stylów jako tło.
Najczęściej zadawane pytania
Czym różnią się gradienty liniowe, radialne i stożkowe?
Gradient liniowy zmienia kolor wzdłuż prostej linii pod wybranym kątem. Gradient radialny rozchodzi się od punktu środkowego w kształcie okręgu lub elipsy. Gradient stożkowy obiega punkt środkowy jak wskazówki zegara, co przydaje się przy kołach barw i wykresach kołowych.
Czy wygenerowany CSS działa we wszystkich przeglądarkach?
Gradienty liniowe, radialne i stożkowe działają we wszystkich aktualnych przeglądarkach. Gdy wybierzesz mieszanie OKLCH lub OKLab, kod zawiera najpierw także standardowy wiersz, aby starsze przeglądarki nadal pokazywały gradient.
Dlaczego mój gradient jest szary w środku?
Mieszanie dwóch bardzo różnych kolorów w standardowej przestrzeni sRGB często przechodzi przez brudną szarość. Przełącz mieszanie na OKLCH lub OKLab: kolory są mieszane tak, jak postrzega je oko, więc środek pozostaje jasny.
Czy mogę używać przezroczystych kolorów?
Tak. Wpisz kolor z przezroczystością, np. rgb(52 66 217 / 0.4) lub #3442d966, w polu koloru punktu. Świetnie sprawdza się to przy nakładkach na zdjęcia.
Ile punktów koloru mogę dodać?
Tyle, ile potrzebujesz. Każdy punkt można przesuwać myszą, dotykiem lub klawiszami strzałek i usuwać, dopóki zostają co najmniej dwa.