Generator gradientów CSS

Każdy gradient może mieć kilka warstw, a każda warstwa ma własny typ, kąt i kolory. Wynikiem jest czysty CSS bez prefiksów przeglądarek, gotowy do wklejenia w projekt. Link do strony zapisuje Twój gradient, więc możesz go udostępnić lub wrócić do niego później.

Jak korzystać z generatora gradientów

Wybierz typ gradientu
Dla każdej warstwy wybierz gradient liniowy, radialny lub stożkowy. Liniowy łączy kolory wzdłuż prostej, radialny rozchodzi się od punktu środkowego, a stożkowy obraca kolory wokół środka.

Dostosuj kolory i warstwy
Kliknij pasek kolorów, aby dodać punkt koloru, przeciągnij go, aby zmienić pozycję, i ustaw dowolny kolor z przezroczystością. Przyciskiem dodawania warstwy nałożysz kolejny gradient na wierzch.

Sprawdź projekt na podglądzie
Przetestuj gradient na sześciu kształtach: pełny ekran, kwadrat, prostokąt poziomy i pionowy, koło i gwiazda. Możesz też zmienić tło za kształtem.