CSS Tools Generator gradientów CSS
Twórz wizualnie gradienty liniowe, radialne i stożkowe, a potem kopiuj czysty CSS. Nakładaj kilka warstw, dodawaj punkty koloru z przezroczystością i przeciągaj bezpośrednio na podglądzie, aby zmienić kierunek.
Gradient CSS od białego do karmazynowego
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.
background: linear-gradient(90deg, #ffffff 0%, #dc143c 100%);