Generator gradientów CSS: trzy typy i duży podgląd
Wybierz typ, przesuń punkty i skopiuj linię CSS. Strona startuje z gotowym gradientem z trzech kolorów, więc nie zaczynasz od pustego pola. Generator gradientów CSS zapisuje linear-gradient(), radial-gradient() albo conic-gradient(), a po włączeniu powtarzania dodaje przedrostek repeating-.
Jak ułożyć gradient krok po kroku
- Kliknij Liniowy, Promienisty lub Stożkowy. Liniowy pyta o kąt od 0 do 360 stopni, promienisty o koło lub elipsę i środek, stożkowy o kąt początkowy i środek.
- Edytuj punkty koloru: próbnik, pole hex, pozycję w procentach i alfę od 0 do 100.
- Strzałki przesuwają punkt, krzyżyk go usuwa, a Dodaj punkt dopisuje nowy na końcu. Punktów jest od 2 do 8.
- Spróbuj Rozłóż równomiernie albo Odwróć punkty, albo wczytaj jeden z sześciu gotowych zestawów.
- Naciśnij Kopiuj przy polu, którego potrzebujesz.
Twarde krawędzie, paski i punkty w złej kolejności
Dwa punkty na tej samej pozycji nie przechodzą płynnie jeden w drugi. Dają ostre cięcie. Zestaw Paski z tego korzysta: pasy po 10% powtarzają się, bo ostatni punkt leży na 20%.
Narzędzie nigdy nie sortuje punktów. Jeśli punkt stoi przed wcześniejszym, przeglądarka przesuwa go na pozycję wcześniejszego. Pozycje mieszczą się w zakresie 0–100.
Co trafia do dwóch pól z kodem
Pierwsze pole zawiera jedną linię, background: ...;. Drugie zawiera dwie: background-color równy pierwszemu punktowi, jako kolor zapasowy, i background-image z gradientem. Kolory pełne mają postać #rrggbb. Przy alfie poniżej 100 powstaje rgb(0 0 255 / 50%). W gradientach promienistych i stożkowych środek zapisujemy jako at 50% 50%, bez rozmiaru, więc działa farthest-corner.
Ograniczenia i dane
Narzędzie przyjmuje tylko kolory hex (#rgb lub #rrggbb), bez nazw i bez hsl(). Jest jedna warstwa gradientu, bez punktów środkowych i bez własnego rozmiaru radialnego. Wszystko dzieje się w przeglądarce: edycja i kopiowanie nie wysyłają żądań, nic się nie zapisuje, a po odświeżeniu wraca gradient startowy. Kopiowanie trafia do schowka; pobierania pliku nie ma.
Często zadawane pytania (FAQ)
rgb(r g b / 50%). Podgląd leży na szachownicy, żeby przezroczystość była widoczna.