Generator gradientów CSS

Twórz liniowe, radialne i stożkowe gradienty CSS z mieszaniem OKLCH lub OKLab i fallbackiem sRGB, a potem kopiuj CSS, klasę Tailwind lub SVG albo pobierz PNG.

Działa w całości w przeglądarce - Twoje gradienty nigdzie nie są wysyłane.

Punkty koloru

Kliknij pasek, aby dodać punkt, i przeciągnij punkt, aby go przesunąć. Gdy punkt jest zaznaczony, strzałki go przesuwają, a Delete usuwa.

KolorHexPozycja (%)

Typ

Kąt (°)

Powtarzanie

Gotowe gradienty

Mieszanie kolorów w

Te same punkty zmieszane na trzy sposoby. Klasyczne sRGB potrafi zszarzeć lub zmętnieć między odległymi kolorami; OKLab utrzymuje równą jasność, a OKLCH - intensywność koloru. Przeglądarki, które nie znają OKLab ani OKLCH, dostają fallback sRGB, który wygląda tak samo.

Tekst na wierzchu

Biały tekst: 2,1:1; Za niski
Czarny tekst: 4,2:1; AA tylko dla dużego tekstu

Najniższy kontrast w dowolnym miejscu gradientu. WCAG AA wymaga 4,5:1 dla zwykłego tekstu i 3:1 dla dużego.

Kod

Format

background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);

Rozmiar obrazu

Zbuduj gradient CSS na oko i skopiuj kod, który działa wszędzie. Wybierz gradient liniowy, radialny lub stożkowy, przeciągnij punkty koloru i zdecyduj, jak mają się mieszać kolory: nowoczesne przeglądarki potrafią mieszać w OKLab lub OKLCH, co pozwala uniknąć szarej martwej strefy klasycznych gradientów sRGB, a kod zawiera dopasowany fallback sRGB dla starszych przeglądarek. Widzisz też, czy biały lub czarny tekst na wierzchu pozostaje czytelny, i możesz wyeksportować klasę Tailwind, SVG albo PNG w dowolnym rozmiarze.

Najczęściej zadawane pytania

Czym różnią się gradienty sRGB, OKLab i OKLCH?

To różne sposoby wyliczania kolorów między dwoma punktami. Klasyczne gradienty CSS mieszają w sRGB, przez co mogą wpaść w szarość (przejście z niebieskiego w żółty prowadzi przez matową szarość) albo ściemnieć w środku. OKLab zaprojektowano tak, by równe kroki wyglądały na równe, więc przejście ma równomierną jasność. OKLCH miesza jasność, nasycenie i odcień osobno, więc obiega koło barw i zachowuje żywe kolory - przejście z czerwonego w niebieski prowadzi przez fiolet zamiast ciemnego, przybrudzonego wrzosu. Aby z nich skorzystać, wpisz „in oklab” lub „in oklch” wewnątrz gradientu.

Czy gradient OKLCH działa w każdej przeglądarce?

Chrome i Edge 111+, Safari 16.2+ oraz Firefox 127+ rozumieją „in oklch” i „in oklab”. Z myślą o starszych przeglądarkach kod ma dwie linie „background”: pierwsza to zwykły gradient sRGB z dodatkowymi punktami pośrednimi, więc wygląda prawie tak samo, a druga to wersja nowoczesna. Przeglądarki pomijają linię, której nie rozumieją, więc każdy dostaje najlepszą wersję, jaką jego przeglądarka potrafi narysować.

Jak używać go z Tailwind CSS?

Wybierz „Klasa Tailwind” i skopiuj ją: to wartość arbitralna, np. bg-[linear-gradient(in_oklab_90deg,_#0077a3_0%,_#f59e0b_100%)], ze spacjami zapisanymi jako podkreślenia, tak jak oczekuje Tailwind. Wklej ją do class - bez żadnej konfiguracji.

Dlaczego nie mogę pobrać gradientu stożkowego jako SVG?

SVG ma tylko gradienty liniowe i radialne i nie potrafi powtarzać radialnego tak jak CSS. W takich przypadkach pobierz PNG: jest rysowany piksel po pikselu według tych samych obliczeń, więc dokładnie odpowiada CSS w dowolnym wybranym rozmiarze.

Czy link do udostępnienia jest prywatny?

Gradient jest zapisany po znaku # w linku - tej części przeglądarki nigdy nie wysyłają na serwer - a strona jest rysowana w całości w Twojej przeglądarce. Nic nie jest wysyłane, a gradient jest przechowywany tylko na tym urządzeniu, żeby czekał na Ciebie, gdy wrócisz.

Generator gradientów CSS

Punkty koloru

Mieszanie kolorów w

Tekst na wierzchu

Kod

Najczęściej zadawane pytania

Powiązane narzędzia