Generator gradientów

Projektuj gradienty liniowe, radialne i stożkowe i eksportuj CSS albo obraz

Pliki nie opuszczają urządzenia
Działa w przeglądarce
Za darmo, bez konta, bez znaku wodnego

Color stops

Click the bar to add a stop. Drag handles to move them; arrow keys nudge, Delete removes.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

The first line is a fallback with precomputed stops for browsers without “in oklab/oklch” support.

Jak używać: Generator gradientów

Buduj gradienty liniowe, radialne i stożkowe z dowolną liczbą przystanków koloru, mieszane w sRGB, OKLab albo OKLCH. Skopiuj wynik jako CSS, klasę Tailwind albo SVG albo pobierz go jako obraz PNG, JPG lub WebP do 8192 px na bok.

1
Wybierz Typ (Liniowy, Radialny albo Stożkowy) i ustaw Kąt, Kształt albo środek; przy radialnym i stożkowym możesz przeciągać podgląd, aby przesunąć środek.
2
Edytuj Przystanki koloru: kliknij pasek, aby dodać przystanek, przeciągaj uchwyty, aby je przesuwać, i zmieniaj kolor oraz pozycję na liście.
3
Wybierz, jak Mieszać kolory (sRGB, OKLab albo OKLCH), albo zacznij od jednego z Gotowców albo Losowego.
4
Skopiuj kod z karty CSS, Tailwind albo SVG.
5
Dla obrazu ustaw Szerokość i Wysokość albo wybierz rozmiar, wybierz PNG, JPG lub WebP i kliknij Pobierz.

Częste pytania

Jaka jest różnica między mieszaniem sRGB, OKLab i OKLCH?

sRGB to klasyczne mieszanie CSS, przy którym kolory dopełniające mogą w środku zrobić się szare. OKLab jest percepcyjnie równy, bez błotnistych punktów środkowych. OKLCH utrzymuje żywe kolory, idąc wokół koła odcieni.

Czy gradienty OKLab i OKLCH działają w starszych przeglądarkach?

Wynik CSS zaczyna się od linii zapasowej, która używa wstępnie obliczonych przystanków dla przeglądarek bez obsługi „in oklab” albo „in oklch”. Kod SVG i pobrane obrazy też używają wstępnie obliczonych przystanków, więc wyglądają tak samo wszędzie.

Dlaczego karta SVG jest wyłączona dla gradientów stożkowych?

SVG nie ma gradientu stożkowego. Zamiast tego pobierz obraz PNG, JPG lub WebP.

Czy mogę użyć przezroczystych przystanków?

Tak, kolory z alfą, takie jak rgba() albo #rrggbbaa, działają. Pobierz PNG lub WebP, aby zachować przezroczystość, bo JPG nie ma kanału alfa.

Czy obraz powstaje na serwerze?

Nie. Obraz jest rysowany na płótnie w przeglądarce i zapisywany bezpośrednio, w dowolnym rozmiarze od 1 do 8192 px na bok.

Jak dostroić przystanek klawiaturą?

Ustaw fokus na uchwycie przystanku i użyj klawiszy strzałek, aby przesunąć go o 1% (Shift o 10%), Home albo End, aby skoczyć na końce, i Delete, aby go usunąć. Gradient zawsze zachowuje co najmniej dwa przystanki.