Mesh Gradient Generator
Create trendy multi-color mesh gradients from layered radial-gradients and copy the CSS — 100% in your browser, no upload
background: radial-gradient(at 20% 20%, #8b5cf6, transparent), radial-gradient(at 80% 15%, #ec4899, transparent), radial-gradient(at 25% 80%, #06b6d4, transparent), radial-gradient(at 75% 75%, #f59e0b, transparent), #1e1b4b;🔒 Runs in your browser — nothing is uploaded.
What is a mesh gradient?
A mesh gradient blends several colors from different points on a surface for a soft, organic look that is popular in modern app and website backgrounds. This generator recreates the effect in pure CSS by layering multiple radial-gradient(at X% Y%, color, transparent) blobs over a solid background color inside a single background shorthand — no images and no libraries.
How to use it
Add color points and drag the X and Y position of each one, pick a background color, or press Randomize for a curated palette. The preview updates live and the exact CSS is ready to copy into your stylesheet.
Frequently asked questions
Is this real CSS with no image?
Yes. The output is a single background shorthand built from layered radial-gradients, so it stays crisp at any size and adds zero network requests.
Where do I paste the mesh gradient CSS?
Copy the declaration and set it as the background of any element such as a hero section, a card, or the page body. Give the element a height so the gradient has room to show.