Mesh Gradient Generator
Make soft mesh-style CSS backgrounds from layered radial gradients. Drag color points, set spread, randomize with a seed and copy pure CSS code.
Mesh settings
Color points
Preview
Drag the handles in the preview or type exact values.
background-color: #ff99cc; background-image: radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%), radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%), radial-gradient(at 100% 100%, #baffc9 0, transparent 50%), radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);
Related Tools
View AllWhat is Mesh Gradient Generator?
Creates the popular soft "mesh gradient" look with plain CSS: a background colour plus several radial gradients, each starting at a colour point and fading to transparent. You place up to eight points by dragging them in the preview or typing their position.
How to use Mesh Gradient Generator
- Choose a Background color.
- Select a color point and set its Color, Spread and Position X / Position Y, or drag the point in the preview.
- Add point / Remove point to change how many colours blend (1–8).
- Click Randomize for a new mesh, or enter a Seed and press Apply seed to get a reproducible one.
- Copy the CSS code.
Example
Default 4 points, background #ff99cc
background-color: #ff99cc; background-image: radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%), radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%), radial-gradient(at 100% 100%, #baffc9 0, transparent 50%), radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);
When to use Mesh Gradient Generator
Use it for hero backgrounds, landing pages, app splash screens and blurred colour backdrops behind glassmorphism cards. If you need precise straight colour transitions use the CSS Gradient Generator; for real mesh warping you need a vector tool or a canvas/WebGL shader.
How Mesh Gradient Generator works
Each point becomes radial-gradient(at x% y%, color 0, transparent spread%) and all of them are listed in background-image above the background-color. Because every gradient fades to transparent, the colours overlap and blend smoothly. Randomize uses a seeded pseudo-random generator (mulberry32): the same seed and number of points always produce the same colours and positions. This is an approximation of true mesh gradients (which CSS does not have), not a bilinear patch mesh.
Common Use Cases
- Landing page hero backgrounds
- Backdrops for glassmorphism cards
- Colourful placeholders for blog covers
- App onboarding screens
- Reproducible backgrounds via seeds in design systems
FAQs
Is this a real mesh gradient?
No CSS property draws true mesh gradients. Layering radial gradients that fade to transparent is the standard CSS technique that produces a very similar soft look.
What does Spread do?
It is the distance (as a percentage of the element) at which a point's colour has fully faded out. Larger values make the colour cover more area.
Can I get the same random mesh again?
Yes. Note the Seed value and press Apply seed later; the same seed with the same number of points recreates the same mesh.