Generator gradientów CSS

Stwórz gradient liniowy lub radialny i skopiuj kod CSS

Typ gradientu
90°
Kolory
Gotowe gradienty

Jak używać

Jak używać

  1. Wybierz typ gradientu (liniowy/radialny)
  2. Dodaj kolory klikając na pasku gradientu
  3. Ustaw kierunek i pozycje kolorów
  4. Skopiuj wygenerowany kod CSS

Generator gradientów CSS online

Projektuj piękne gradienty CSS z podglądem na żywo. Obsługuje gradienty liniowe i radialne z dowolną liczbą kolorów (color stops).

Ustaw kierunek, pozycje kolorów i przejrzystość. Gotowy kod CSS kopiujesz jednym kliknięciem. Galeria predefiniowanych gradientów na start.

Najczęściej zadawane pytania

Jak skopiować gradient do CSS?
Kod CSS wyświetla się na żywo pod podglądem gradientu. Kliknij przycisk „Kopiuj CSS" aby skopiować gotowy kod background z prefiksami przeglądarek do schowka.
Ile kolorów mogę dodać?
Możesz dodać do 10 kolorów (color stops) w jednym gradiencie. Kliknij na pasku gradientu aby dodać nowy punkt koloru. Przeciągnij punkty aby zmienić ich pozycję.
Czym różni się gradient liniowy od radialnego?
Gradient liniowy przebiega w linii prostej pod wybranym kątem. Gradient radialny rozchodzi się od centrum na zewnątrz w kształcie koła lub elipsy.