Narzędzia do kolorów

Generator gradientów CSS: liniowy, radialny – za darmo

Za darmo, bez rejestracji, działa w przeglądarce. Zaprojektuj gradient liniowy, radialny lub stożkowy z maksymalnie 8 punktami koloru, oglądaj go na żywo i skopiuj CSS. Pobierz go jako tło PNG w popularnych rozmiarach.

Typ

Punkty koloru

CSS

background: #ff7ac6;
background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);

Pierwszy wiersz to jednolity kolor dla bardzo starych urządzeń, które nie wyświetlają gradientów.

Zacznij od gotowego wzoru

Tworzone na twoim urządzeniu.

Dlaczego warto: Generator gradientów CSS

W 100% za darmo
Korzystaj, ile chcesz. Bez rejestracji, bez znaku wodnego, bez instalowania.
Prywatność od podstaw
To, co wpiszesz, zostaje w przeglądarce i nigdy nie jest do nas wysyłane.
Działa na każdym urządzeniu
Działa w przeglądarce na Windows, Mac, Linux, Android i iPhone. Bez instalowania aplikacji.

Jak używać: Generator gradientów CSS

  1. Wybierz gradient liniowy, radialny lub stożkowy i ustaw kierunek.
  2. Wybierz kolory i przeciągnij każdy punkt na miejsce.
  3. Skopiuj CSS lub pobierz gradient jako obraz.

Najczęściej zadawane pytania

Jak użyć CSS?
Wklej go do reguły elementu, który chcesz pokolorować. Pierwsza linia to jednolity kolor zapasowy; druga to gradient.
Czym różnią się gradienty liniowy, radialny i stożkowy?
Liniowy przechodzi wzdłuż prostej linii, radialny rozchodzi się od środka, a stożkowy obiega środek jak koło barw.
Czy mogę użyć przezroczystości?
Tak. Wpisz w punkcie kolor, np. rgba(47, 91, 255, 0.5).
Czy cokolwiek jest przesyłane?
Nie. Gradienty są tworzone na twoim urządzeniu.
Czy Generator gradientów CSS jest za darmo?
Tak. Korzystasz za darmo, bez rejestracji i bez instalowania czegokolwiek.