Generátor CSS gradientu
Postav lineární a radiální CSS gradienty vizuálně. Uprav color stops, zkopíruj ready-to-paste 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.