Generator gradientów CSS

Twórz gradienty liniowe, promieniste i stożkowe z nieograniczoną liczbą stops, interpolacją uwzględniającą OKLCH oraz wynikiem jako utility Tailwind v4. Podgląd na żywo, ponad 30 presetów, w Twojej przeglądarce.

Proporcje

Kąt: 90°

Interpolacja kolorów

Color stops

CSS

Tailwind v4

JSON

Presety

Stworzony do produkcyjnych gradientów CSS

Linear / radial / conic, gładkie OKLCH, świadome Tailwinda — z kilkoma drobnymi smaczkami, które sprawiają, że korzystanie naprawdę cieszy.

Trzy typy gradientów

Linear z kątem 0-360°, radial z circle/ellipse + rozmiar + pozycja, conic z from-angle + pozycja. Wszystkie generują składnię zgodną ze standardem CSS Images Module Level 4.

Do 12 color stops

Dodawaj stopy w dowolnym procencie, przeciągaj suwak pozycji, by precyzyjnie ustawić, klikaj próbkę, by wybrać kolor lub wkleić HEX. Stopy są automatycznie sortowane na wyjściu. Kliknij ×, by usunąć (minimum 2 stopy).

Interpolacja uwzględniająca OKLCH

Przełączaj między domyślnym sRGB a nowoczesną interpolacją in oklch. OKLCH daje percepcyjnie gładsze punkty środkowe — bez błotnistych szarych pasów przy skokach barwy. W przeglądarkach bez CSS Color 4 odpowiednio przełącza się na fallback.

Wyjście CSS, Tailwind v4, JSON

Trzy panele wyjściowe aktualizują się na żywo: surowy CSS (background-image: linear-gradient(...)), arbitrary-value utility Tailwind v4 (bg-[linear-gradient(...)]) oraz fragment tokenu designu JSON gotowy dla Style Dictionary lub Figma Tokens.

Ponad 30 starannie dobranych presetów

Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — kliknij, aby wczytać i dostosować. Każdy preset to realny punkt wyjścia o jakości produkcyjnej, a nie tylko nazwa.

Podgląd na żywo + prywatność z założenia

Podgląd renderowany natywnym background-image, więc to, co widzisz, jest dokładnie tym, co produkuje Twój arkusz stylów. Każdy piksel działa lokalnie — otwórz DevTools → Network i zweryfikuj zero żądań wychodzących.

Jak zbudować gradient CSS

Cztery kroki od pustego ekranu do gotowego do produkcji CSS, Tailwind albo JSON.

1

Wybierz typ gradientu

Linear dla teł, nagłówków, sekcji hero. Radial dla świateł punktowych, winiet, świecących przycisków. Conic dla wykresów kołowych, kół kolorów i modnych syntetycznych teł. Przełączaj się między nimi za pomocą zakładek — Twoje color stops są zachowane przy zmianie.
2

Rozmieść swoje color stops

Kliknij próbkę koloru, aby otworzyć picker, lub wklej HEX bezpośrednio do pola. Przeciągnij suwak, aby ustawić pozycję stopu 0-100%. Kliknij + Dodaj stop, aby wstawić nowy stop w największej luce (z kolorem punktu środkowego). Łącznie do 12 stopów.
3

Dostrój geometrię + interpolację

Dla linear ustaw kąt (0° wskazuje w górę, 90° w prawo). Dla radial wybierz kształt, słowo kluczowe rozmiaru i pozycję środka. Dla conic ustaw kąt początkowy. Przełącz Interpolację kolorów na OKLCH dla percepcyjnie gładkich punktów środkowych w gradientach wielobarwnych.
4

Skopiuj wynik

Trzy panele aktualizują się na żywo: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (kształt design tokenu). Użyj ikony kopiowania na każdym z nich albo kliknij Pobierz CSS, aby zapisać plik gradient.css gotowy do wrzucenia do projektu.

Stworzony dla projektantów + deweloperów

Cztery typowe scenariusze, w których narzędzie przeglądarkowe stawiające na prywatność wygrywa z otwieraniem Figmy + osobnej strony z gradientami.

Tło sekcji hero dla strony marketingowej

Wybierz preset bliski Twojej marce, wrzuć dwa firmowe kolory do stops, przełącz na interpolację OKLCH dla czystego punktu środkowego. Skopiuj CSS, wklej do arkusza stylów hero. Łączny czas: poniżej 2 minut.

Gradienty przycisków + kart świadome marki

Zbuduj raz 3-stopowy gradient firmowy, skopiuj jako token designu JSON, wrzuć do Style Dictionary / Figma Tokens. Teraz każdy przycisk + karta na każdej platformie używa tego samego gradientu przez referencję. Aktualizujesz w jednym miejscu, propaguje się wszędzie.

Tła conic dla wykresów + dashboardów

Syntetyczne gradienty conic są idealne do grafik wykresów kołowych, tarcz postępu czy stanów typu „data-loading" shimmer. Wybierz typ conic, ustaw from-angle, wrzuć stops na właściwych procentach — matematyka dokładnie mapuje kąty 0-360° na pozycje procentowe.

Niestandardowe tła do slajdów, postów społecznościowych, obrazów hero

Zbuduj gradient, ustaw proporcje pasujące do celu (16:9 dla slajdów, 1:1 dla IG, 3:1 dla nagłówka X), zrób zrzut podglądu. Albo skopiuj CSS do jednorazowego pliku HTML i zrób zrzut w przeglądarce w dokładnym rozmiarze pikselowym, jakiego potrzebujesz.

100% prywatne — działa w Twojej przeglądarce

Twoje kolory i gradienty nigdy nie opuszczają urządzenia. Otwórz DevTools → Network, a zobaczysz zero żądań wychodzących podczas dowolnej operacji.

Składanie ciągu gradientu, serializacja CSS / Tailwind / JSON oraz podgląd na żywo działają jako JavaScript na Twoim komputerze — bez renderowania po stronie serwera, bez API stron trzecich.
Podgląd używa natywnego CSS background-image — więc renderowany gradient pasuje dokładnie do tego, co Twój arkusz stylów wyprodukuje w przeglądarkach Twoich użytkowników.
Bez logowania, bez telemetrii wartości kolorów. Używamy tylko jednego cookie do stanu zgody na cookies oraz jednego do preferencji języka.

Powiązane przewodniki

Wybrane lektury o gradientach CSS, interpolacji OKLCH i systemach design tokenów.

Najczęstsze pytania

Jaka jest różnica między linear, radial i conic?

Linear przechodzi wzdłuż prostej linii pod wybranym kątem (0° = w górę, 90° = w prawo). Radial przechodzi od punktu środkowego na zewnątrz — circle lub ellipse, ze słowami kluczowymi rozmiaru jak farthest-corner. Conic obraca się wokół punktu środkowego — color stops siedzą pod kątami niczym wskazówki zegara. Conic świetnie nadaje się do wykresów kołowych, tarcz wskaźników i syntetycznych teł typu color-wheel.

Kiedy używać interpolacji OKLCH?

Przy przejściu między barwami, które nie są analogiczne — np. niebieski → żółty albo czerwony → zielony. Domyślna interpolacja sRGB przechodzi przez błotnisty szary punkt środkowy; OKLCH (CSS Color Module 4 in oklch) utrzymuje punkt środkowy żywym, ponieważ interpoluje w przestrzeni percepcyjnie jednolitej. Dla gradientów dwustopowych między podobnymi barwami różnica jest niewielka. Dla gradientów wielostopowych lub o szerokim zakresie barw OKLCH jest dramatycznie lepszy.

Co daje mi wyjście Tailwind v4?

Arbitrary-value utility, które możesz wkleić wprost do JSX / Blade / HTML: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. Bez zmian w tailwind.config.js; działa w każdym projekcie Tailwind 4. Jeśli wolisz nazwane tokeny kolorów, skopiuj zamiast tego CSS i przekonwertuj ręcznie.

Czy gradienty będą działać w starszych przeglądarkach?

Gradienty linear i radial są powszechnie wspierane od 2014 roku. Conic gradients pojawiły się we wszystkich evergreen browsers do 2021 roku. Słowo kluczowe interpolacji in oklch jest wspierane w Chrome 111+, Safari 16.2+, Firefox 113+. Jeśli musisz wspierać starsze przeglądarki, użyj domyślnej interpolacji sRGB — różnica wizualna ma największe znaczenie dla gradientów wielostopowych ze skokami barwy.

Czy cokolwiek jest wysyłane na wasz serwer?

Nie. Generowanie ciągu gradientu, serializacja CSS / Tailwind / JSON oraz podgląd na żywo działają w JavaScripcie na Twoim urządzeniu. Otwórz DevTools → Network, a zobaczysz zero żądań wychodzących podczas dowolnej operacji. Wklejaj kolory marki, wewnętrzne tokeny — nic nie opuszcza Twojego laptopa.