Mesh Gradient Generator
Create modern mesh gradient backgrounds from layered radial gradients. Click to place colour points, adjust spread, copy the CSS.
Color Points
Point 1
.mesh {
background-color: #0f0724;
background-image:
radial-gradient(circle at 20% 25%, #7c3aed 0px, transparent 55%),
radial-gradient(circle at 80% 20%, #db2777 0px, transparent 55%),
radial-gradient(circle at 25% 80%, #2563eb 0px, transparent 55%),
radial-gradient(circle at 78% 78%, #06b6d4 0px, transparent 55%);
}About the mesh gradient generator
A mesh gradient is the soft multi-colour wash you see behind modern SaaS hero sections. Design tools produce them as images, but they can be built in pure CSS by layering several radial gradients that fade to transparent, letting the colours bleed into each other where they overlap.
Because it is CSS rather than an image, it scales to any viewport, weighs nothing, and the colours can be swapped to match a brand instantly. This generator lets you place each colour point by clicking directly on the preview.
How to use it
- 1Set the base colour. It shows through wherever the blobs fade out.
- 2Click anywhere on the preview to move the selected colour point.
- 3Add points for more colours. Three to five is usually the sweet spot.
- 4Adjust blob spread. Larger values blend more, smaller values keep colours distinct.
- 5Copy the CSS. It is a background-color plus a stack of radial gradients.
Worth knowing
- Keep the base colour dark for a night look, or very light for a soft pastel wash.
- Colours that sit near each other on the colour wheel blend more convincingly than opposites.
- Since it is one element with a background, it costs far less than an image and never looks blurry on a high-density screen.
Questions
How is a mesh gradient different from a normal gradient?
A normal gradient blends along one axis or out from one point. A mesh gradient layers several independent radial gradients that fade to transparent, so colours mix in more than one direction at once.
Will this slow down my page?
No. It is a single element with a background image made of gradients. There is no network request and no image to decode, which makes it lighter than the PNG equivalent.
Can I animate a mesh gradient?
Yes. Animate background-position, or wrap the blobs in separate absolutely positioned elements and animate their transforms, which is smoother because transforms are composited.