Generator gradientów CSS

Twórz liniowe, radialne i stożkowe gradienty CSS na wizualnym pasku i kopiuj kod jako CSS, Tailwind lub SVG — bezpośrednio w przeglądarce.

O narzędziu Generator gradientów CSS

Co to jest

To narzędzie pozwala zaprojektować gradient, przeciągając punkty kolorów na pasku zamiast pisać składnię ręcznie. Wybierz gradient liniowy, radialny lub stożkowy, ustaw kąt, kształt i położenie, nadaj każdemu punktowi kolor i krycie oraz wybierz przestrzeń kolorów dla płynniejszych przejść. Wynik skopiujesz jako CSS, klasę Tailwind lub SVG.

Główne funkcje

  • Gradienty liniowe, radialne i stożkowe, także powtarzające się.
  • Punkty kolorów dodawane, przeciągane i usuwane na interaktywnym pasku, każdy z własnym kryciem.
  • Kąt, kształt i położenie środka.
  • Interpolacja w sRGB, HSL, OKLab lub OKLCH.
  • Kod jako CSS, Tailwind lub SVG; losowy gradient dla inspiracji.

Jak używać

  1. Wybierz typ gradientu albo kliknij przycisk losowego gradientu, żeby zacząć od pomysłu.
  2. Kliknij pasek, aby dodać punkty, przeciągnij je i ustaw każdemu kolor i krycie.
  3. Dostosuj kąt, kształt lub położenie i, jeśli chcesz, przestrzeń kolorów.
  4. Skopiuj kod w potrzebnym formacie.

Kiedy się przydaje

  • Przygotować gradient tła lub przycisku na stronę.
  • Uzyskać płynny gradient bez szarego środka, który daje zwykłe mieszanie w sRGB.
  • Zamienić gradient na SVG do ilustracji lub ikony.

Prywatność i ograniczenia

Twoje dane

Gradient powstaje w przeglądarce i nic nie trafia na serwer — witryna otrzymuje tylko anonimowe zdarzenie „otwarto narzędzie”. Wynik wysłany do innego narzędzia zostaje na tym urządzeniu przez 24 godziny w „Ostatniej aktywności”.

Ograniczenia

  • SVG nie ma gradientów stożkowych: stożkowy jest eksportowany do SVG jako liniowy.
  • SVG zawsze miesza kolory w sRGB, więc gradient w OKLab lub OKLCH wygląda tam trochę inaczej.

Najczęstsze pytania

Którą przestrzeń kolorów wybrać?

OKLCH lub OKLab dają równe, nasycone przejścia — na przykład z niebieskiego do żółtego bez matowego szarego środka. sRGB odpowiada temu, co tworzą starsze narzędzia.

Dlaczego SVG wygląda inaczej niż CSS?

SVG nie ma gradientów stożkowych i miesza kolory tylko w sRGB. Narzędzie ostrzega, gdy któraś z tych różnic ma zastosowanie.

Czy wszystkie przeglądarki obsługują gradienty OKLCH?

Wszystkie współczesne — tak. Dla bardzo starych wybierz sRGB, które działa wszędzie.