Generator gradientów CSS
Projektuj liniowe i promieniowe gradienty wizualnie, a następnie kopiuj gotowy do użycia CSS. Wszystko aktualizuje się na żywo w Twojej przeglądarce.
Jak zrobić gradient CSS
- Wybierz liniowy lub promieniowy, a następnie ustaw kąt dla gradientu liniowego.
- Wybierz kolory dla swoich punktów i ustaw każdą pozycję od 0 do 100.
- Dodawaj lub usuwaj punkty, aby dowolnie kształtować przejście.
- Skopiuj wygenerowany CSS do swojego arkusza stylów lub atrybutu style.
Częste pytania
Czym jest gradient liniowy?
Gradient liniowy płynnie przechodzi między kolorami wzdłuż prostej pod wybranym kątem, od 0 do 360 stopni.
Czym jest gradient promieniowy?
Gradient promieniowy płynnie przechodzi między kolorami na zewnątrz od punktu środkowego w kształcie kołowym lub eliptycznym.
Co oznaczają liczby pozycji?
Każda pozycja to wartość procentowa wzdłuż gradientu, od 0% na początku do 100% na końcu. Punkty są automatycznie sortowane według pozycji.
Czy gradient działa we wszystkich przeglądarkach?
Tak. Wygenerowany CSS używa standardowych funkcji linear-gradient i radial-gradient obsługiwanych przez każdą nowoczesną przeglądarkę.
Powiązane narzędzia
Dlaczego używać generatora gradientów?
Użyj generatora gradientów CSS, aby wizualnie projektować płynne przejścia kolorów zamiast zgadywać wartości w kodzie, i natychmiast kopiować gotowy do produkcji CSS.
- Obserwuj zmianę gradientu na żywo podczas dopasowywania kolorów, kątów i punktów.
- Kopiuj dokładny, poprawny CSS bez szukania błędów składni.
- Twórz wielopunktowe tła dla przycisków, banerów i sekcji w kilka sekund.
Wskazówki i ograniczenia
Możesz dodać tyle punktów koloru, ile chcesz, a generator utrzymuje co najmniej dwa, aby gradient był zawsze poprawny. Punkty są sortowane według pozycji przed wygenerowaniem CSS.