Generator gradientów CSS

Czym jest Generator gradientów CSS?

Generator gradientów CSS to darmowe narzędzie w przeglądarce dla projektantów stron i programistów front-end, którzy chcą tworzyć gradienty wizualnie zamiast pisać składnię ręcznie. Wybierz liniowy, radialny lub stożkowy — z opcjonalnym wariantem powtarzalnym — a następnie edytuj punkty koloru na przeciąganym pasku podglądu lub w wierszach na punkt z polami koloru HEX i pozycji. Gradienty radialne oferują kształt koła/elipsy, słowo kluczowe rozmiaru (closest-side, closest-corner, farthest-side, farthest-corner) i środek at X% Y%, a stożkowe przyjmują kąt początkowy i środek. Możesz nakładać wiele warstw gradientu w jedno tło rozdzielone przecinkami, wygenerować losowy gradient, zastosować gotowe palety, obrócić odcień każdego punktu i skopiować gotową do wklejenia regułę background.

Jak używać Generator gradientów CSS

1. Wybierz typ gradientu — Liniowy, Radialny lub Stożkowy — i włącz Powtarzalny w opcjach, aby uzyskać wzór powtarzalny.
2. Przeciągaj punkty wzdłuż paska podglądu, aby zmienić ich położenie, kliknij puste miejsce na pasku, aby dodać punkt, lub kliknij dwukrotnie punkt, aby go usunąć.
3. Dostrój każdy punkt za pomocą pól koloru HEX i pozycji lub użyj zakraplacza (gdzie jest obsługiwany), aby pobrać kolor z ekranu.
4. Dla gradientów radialnych ustaw kształt (koło lub elipsę), słowo kluczowe rozmiaru oraz środek X/Y; dla stożkowych kąt początkowy i środek.
5. Dodaj więcej warstw, aby nałożyć gradienty w jedno tło, wypróbuj Losowy, zastosuj paletę lub obróć wszystkie odcienie naraz.
6. Skopiuj wygenerowaną regułę CSS background i wklej ją do arkusza stylów.

Przykłady

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

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

Radialny, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

Warstwa 1 liniowy 90deg; Warstwa 2 radialny circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

Najczęściej zadawane pytania

Jakie typy gradientów i opcje są obsługiwane?

Gradienty liniowe, radialne i stożkowe, każdy z opcjonalnym wariantem powtarzalnym. Radialny dodaje kształt koła/elipsy, słowo kluczowe rozmiaru (closest-side, closest-corner, farthest-side, farthest-corner) i środek at X% Y%; stożkowy dodaje kąt początkowy i środek. Możesz też nałożyć wiele warstw w jedno tło.

Jak działa przeciągany pasek punktów?

Przeciągnij dowolny punkt wzdłuż paska, aby zmienić jego położenie, kliknij puste miejsce paska, aby wstawić nowy punkt z interpolowanym kolorem, i kliknij dwukrotnie punkt, aby go usunąć (zachowywane są co najmniej dwa). Każdy punkt ma też pola koloru HEX i pozycji pod paskiem.

Czy mogę pobrać kolor z ekranu?

Tak, w przeglądarkach obsługujących API EyeDropper. Gdy jest dostępny, obok każdego punktu pojawia się przycisk zakraplacza; kliknij i wybierz dowolny piksel na ekranie. Zawsze możesz też wpisać wartość HEX lub użyć natywnego próbnika koloru.

Co robią Losowy, palety i obrót odcienia?

Losowy zastępuje aktywną warstwę nowym losowym gradientem, palety wymieniają punkty aktywnej warstwy na wyselekcjonowany zestaw kolorów, a Obróć odcień przesuwa odcień każdego punktu w każdej warstwie naraz. Zmieniają gradient tylko po kliknięciu.

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.