CSS Visual Directory
Mesh Gradient
Overlapping radial gradients that create a soft mesh blend.
Edit Mesh Gradient
Change any value to see it update live.
About this entry
What it is
Overlapping radial gradients that create a soft mesh blend.
Backgrounds for modern SaaS pages and slide decks.
Copy & use
How to copy and use mesh gradient
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Backgrounds for modern SaaS pages and slide decks.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
Three radial gradients layered over a flat base colour. Each fades to transparent, so where they overlap the colours mix into something no single gradient produces.
at 20% 20%- Position of the first blob, given as a percentage of the box.
0px- Where the colour starts — zero puts full colour at the centre point.
transparent 50%- The fade-out distance. This is what lets the layers blend.
#fdfcfb- The base colour underneath, filling anything the blobs do not cover.
Making it yours
How to adjust mesh gradient
Move the positions before changing the colours. Three blobs spread unevenly look organic; three at even spacing immediately look generated.
Worth knowing before you ship it
Layer order matters — the first gradient sits on top. The base colour must be last, or it paints over everything above it.
Common questions
Using mesh gradient
What is mesh gradient?
Overlapping radial gradients that create a soft mesh blend. Backgrounds for modern SaaS pages and slide decks.
Where do I put the mesh gradient CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Backgrounds for modern SaaS pages and slide decks. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will mesh gradient work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise mesh gradient after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing