Hero section pozadí pro landing page. Button background s jemným přechodem. Skeleton loader animace (gradient jako shimmer). Overlays nad obrázky (od průhledné k pevné).

Úhel v linear-gradient . 0deg = zdola nahoru. 90deg = zleva doprava. Liší se od běžného „kompasového" směrování. Hard stops. Dvě color stops na stejné pozici vytvoří ostrý přechod — užitečné na pruhy. Banding. Plynulý gradient přes tmavé barvy může ukázat pruhy na 8-bit displejích. Pomáhá přidat noise nebo použít dithering. Konický ( conic-gradient ) tu není generován — jen lineární a radiální. Background na transparentu. Gradient s alpha pracuje krásně na obrázku, ale pozor na čitelnost textu.

Generátor CSS gradientu

Postav lineární a radiální CSS gradienty vizuálně. Uprav color stops, zkopíruj ready-to-paste CSS.

Typ

Angle 90°

Color stops

Preview

CSS

Vytvořil JXXR1 · ♥ Sponzorovat · ☕ Kup mi kávu

K čemu to slouží?

CSS gradient ti dá plynulý přechod mezi barvami jako pozadí elementu. Lineární gradient jde ve zvoleném úhlu, radiální vychází ze středu. Tenhle generátor má vizuální ovládání color stops, úhlu/typu a okamžitý náhled. Vyklikáš, zkopíruješ, vlepíš.

Kdy to použít

Hero section pozadí pro landing page.
Button background s jemným přechodem.
Skeleton loader animace (gradient jako shimmer).
Overlays nad obrázky (od průhledné k pevné).

Časté chyby

Úhel v linear-gradient. 0deg = zdola nahoru. 90deg = zleva doprava. Liší se od běžného „kompasového" směrování.
Hard stops. Dvě color stops na stejné pozici vytvoří ostrý přechod — užitečné na pruhy.
Banding. Plynulý gradient přes tmavé barvy může ukázat pruhy na 8-bit displejích. Pomáhá přidat noise nebo použít dithering.
Konický (conic-gradient) tu není generován — jen lineární a radiální.
Background na transparentu. Gradient s alpha pracuje krásně na obrázku, ale pozor na čitelnost textu.