Generator gradientów CSS

Gradienty liniowe

background: linear-gradient(135deg, #2563eb, #16a34a);

Kąt biegnie zgodnie z ruchem wskazówek zegara od góry: 0deg = góra, 90deg = prawo, 180deg = dół, 270deg = lewo. Możesz też pisać nazwane kierunki ręcznie: to right odpowiada 90deg, a to bottom left odpowiada 135deg.

Gradienty radialne

background: radial-gradient(circle, #2563eb, #16a34a);

Kolory rozchodzą się od środka elementu na zewnątrz. Gradienty radialne nie używają kąta; dodaj słowa kluczowe pozycji lub rozmiaru ręcznie (at 30% 40%, ellipse), gdy potrzebujesz większej kontroli.

Punkty koloru

Gradienty CSS przyjmują więcej niż dwa kolory, a każdy punkt może mieć pozycję:

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

Dwa punkty na tej samej pozycji tworzą twardą granicę: kolor zmienia się natychmiast zamiast płynnie przechodzić. Przydatne przy dzielonych tłach.

Wskazówki

• Gradient od czerwieni do błękitu przechodzi przez szarawy środek przy domyślnej interpolacji sRGB. Interpolacja w oklch utrzymuje barwną mieszankę: linear-gradient(in oklch, red, blue), obsługiwana przez nowoczesne przeglądarki.
• transparent nie jest bezbarwny: w sRGB to rgba(0,0,0,0), więc przejście do transparent przechodzi przez ciemną szarość. Zamiast tego użyj rgba(color, 0).
• Gradienty są renderowane na GPU w nowoczesnych przeglądarkach, więc praktycznie nic nie kosztują w każdym rozmiarze. Animowanie między gradientami nie jest obsługiwane i zmienia się gwałtownie; zamiast tego animuj krycie dodatkowej warstwy.
• Wypełnienie tekstu: połącz deklarację z background-clip: text; color: transparent;, aby wypełnić tekst gradientem. Dla ramek border-image: linear-gradient(...) 1; działa w nowoczesnych przeglądarkach.