Hero section pozadie pre landing page. Button background s jemným prechodom. Skeleton loader animácie (gradient ako shimmer). Overlays nad obrázkami (od priehľadnej k pevnej).

Uhol v linear-gradient . 0deg = zdola hore. 90deg = zľava doprava. Líši sa od bežného „kompasového" smerovania. Hard stops. Dve color stops na rovnakej pozícii vytvoria ostrý prechod — užitočné na pruhy. Banding. Plynulý gradient cez tmavé farby môže ukázať pruhy na 8-bit displejoch. Pomáha pridať noise alebo použiť dithering. Konický ( conic-gradient ) tu nie je generovaný — len lineárny a radiálny. Background na transparente. Gradient s alpha pracuje krásne na obrázku, ale aj pozor na čitateľnosť textu.

Generátor CSS gradientu

Postav lineárne a radiálne CSS gradienty vizuálne. Uprav color stops, skopíruj ready-to-paste CSS.

Typ

Angle 90°

Color stops

Preview

CSS

Vytvoril JXXR1 · ♥ Sponzorovať · ☕ Kúp mi kávu

Načo to slúži?

CSS gradient ti dá plynulý prechod medzi farbami ako pozadie elementu. Lineárny gradient ide v zvolenom uhle, radiálny vychádza zo stredu. Tento generátor má vizuálne ovládanie color stops, uhla/typu a okamžitý náhľad. Vyklikáš, skopíruješ, vlepíš.

Kedy to použiť

Hero section pozadie pre landing page.
Button background s jemným prechodom.
Skeleton loader animácie (gradient ako shimmer).
Overlays nad obrázkami (od priehľadnej k pevnej).

Časté chyby

Uhol v linear-gradient. 0deg = zdola hore. 90deg = zľava doprava. Líši sa od bežného „kompasového" smerovania.
Hard stops. Dve color stops na rovnakej pozícii vytvoria ostrý prechod — užitočné na pruhy.
Banding. Plynulý gradient cez tmavé farby môže ukázať pruhy na 8-bit displejoch. Pomáha pridať noise alebo použiť dithering.
Konický (conic-gradient) tu nie je generovaný — len lineárny a radiálny.
Background na transparente. Gradient s alpha pracuje krásne na obrázku, ale aj pozor na čitateľnosť textu.