Generator gradientów CSS

Czym jest Generator gradientów CSS?

Generator gradientów CSS to darmowe narzędzie online dla projektantów stron i programistów front-end, którzy potrzebują szybkiego gradientu bez ręcznego pisania składni. Wybierz gradient liniowy, radialny lub stożkowy, ustaw kąt w stopniach dla typów liniowego i stożkowego oraz zdefiniuj punkty koloru, każdy z kolorem HEX i pozycją w procentach. Podczas edycji podgląd na żywo pokazuje wynik, a odpowiadająca reguła CSS background aktualizuje się natychmiast, dzięki czemu możesz ją skopiować prosto do arkusza stylów. Użyj go do projektowania przycisków, teł hero, kart i nakładek lub do nauki działania funkcji linear-gradient(), radial-gradient() i conic-gradient().

Jak używać Generator gradientów CSS

1. Wybierz typ gradientu: Liniowy, Radialny lub Stożkowy.
2. Dla gradientu liniowego lub stożkowego ustaw kąt w stopniach (0-360); radialny używa wyśrodkowanego okręgu i ignoruje kąt.
3. Edytuj każdy punkt koloru: wpisz lub wybierz kolor HEX i ustaw jego pozycję w procentach (0-100).
4. Kliknij Dodaj punkt, aby wstawić kolejny kolor, lub ikonę kosza, aby usunąć punkt (zachowywane są co najmniej dwa punkty).
5. Obserwuj aktualizację pola podglądu na żywo, a następnie skopiuj wygenerowaną regułę CSS background przyciskiem kopiowania.

Przykłady

Liniowy, 90deg, #4f86f7 przy 0% i #9333ea przy 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Radialny, punkty #ffffff 0%, #4f86f7 50%, #1e3a8a 100%

background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);

Najczęściej zadawane pytania

Jakie typy gradientów są obsługiwane?

Trzy: linear-gradient (z kątem w stopniach), radial-gradient (wyśrodkowany okrąg) i conic-gradient (z kątem początkowym). Przełączaj między nimi za pomocą przełącznika typu, a CSS aktualizuje się natychmiast.

Jak działają punkty koloru i pozycje?

Każdy punkt ma kolor i pozycję w procentach od 0 do 100. Punkty są zapisywane w CSS w kolejności, w jakiej pojawiają się na liście, dokładnie tak, jak interpretuje je przeglądarka, więc kolejnością sterujesz bezpośrednio. Punkty możesz dodawać przyciskiem Dodaj punkt i usuwać aż do minimum dwóch.

Czy mogę wybierać kolory wizualnie zamiast wpisywać HEX?

Tak. Kliknij mały próbnik koloru obok każdego punktu, aby otworzyć natywny próbnik kolorów przeglądarki, lub wpisz wartość HEX, taką jak #4f86f7, bezpośrednio w polu koloru. Podgląd i CSS aktualizują się w miarę wprowadzania zmian.

Dlaczego pole kąta znika przy gradientach radialnych?

Gradient radialny jest tu rysowany jako wyśrodkowany okrąg, który nie używa kąta, dlatego pole kąta jest wyświetlane tylko dla typów liniowego i stożkowego, gdzie zmienia kierunek.

Czy moje kolory lub CSS są gdziekolwiek przesyłane?

Nie. Gradient jest budowany w całości w Twojej przeglądarce za pomocą lokalnych obliczeń na łańcuchach i kolorach — żadne kolory, CSS ani ustawienia nigdy nie są wysyłane na serwer, więc działa offline i zachowuje prywatność Twojej pracy.