CSS Gradient Generator

O tym narzędziu

Generator Gradientów CSS tworzy gładkie wielokolorowe gradienty, które można wklejać bezpośrednio do CSS. Obsługuje gradienty liniowe (kierunkowe) i radialne (okrągłe) z dowolną liczbą punktów kolorów.

Punkty kolorów definiują, gdzie zaczyna się i kończy każdy kolor wzdłuż osi gradientu. Suwak kąta obraca gradienty liniowe od 0° do 360°.

Jak używać

1. Wybierz typ gradientu: Liniowy lub Radialny.
2. Dla gradientów liniowych przeciągnij suwak kąta, aby ustawić kierunek.
3. Kliknij próbkę koloru, aby ją zmienić, i przeciągnij suwak dla pozycji.
4. Kliknij + Dodaj punkt, aby dodać więcej. Kliknij ✕, aby usunąć.
5. Kliknij Kopiuj, aby skopiować deklarację CSS background.

Przypadki użycia

Projektanci web tworzą tła dla sekcji hero z gradientami CSS zamiast obrazków. Zespoły brandingowe generują palety gradientów zgodne z wytycznymi kolorystycznymi marki. Programiści prototypują karty, przyciski i nakładki.

Często zadawane pytania

• Jaka jest różnica między gradientami liniowymi a radialnymi? — Gradient liniowy przechodzi między kolorami wzdłuż prostej linii pod danym kątem. Gradient radialny promieniuje kolory na zewnątrz od punktu centralnego.
• Czy mogę używać więcej niż dwóch kolorów? — Tak. Kliknij + Dodaj punkt, aby dodać tyle punktów kolorów, ile potrzebujesz.
• Czy wygenerowany CSS jest kompatybilny z różnymi przeglądarkami? — Tak. Funkcje linear-gradient() i radial-gradient() są w pełni obsługiwane we wszystkich nowoczesnych przeglądarkach bez prefiksów dostawcy.