How to use the mesh gradient generator
- Drag the colour points. Each dot is a colour in the mesh. Drag it anywhere on the preview, or select it and use the arrow keys for fine adjustments.
- Choose colours. Set the base colour that shows through behind everything, then pick a colour for each point. Two to four points look elegant; five or six create a busier, more painterly effect.
- Set the softness. Softness controls how far each colour spreads before fading out. Higher values blend everything together; lower values keep distinct pools of colour.
- Add grain and copy. Tick Add subtle grain for a printed texture, then copy the CSS into your stylesheet.
What is a mesh gradient?
In design apps, a mesh gradient blends colours across a grid of points, creating smooth, organic transitions that a straight linear or radial gradient can’t. They’re popular for hero backgrounds, app splash screens and brand artwork.
How it works in CSS
CSS has no mesh gradient function, but layering several radial-gradient() backgrounds, each fading from a colour to transparent, gives a very similar result. Each layer is positioned with at x% y%, so the gradient scales with the element and stays crisp on any screen, with no image to download.
Making it look good
Pick colours that sit near each other on the colour wheel, plus one contrasting accent. Keep a darker base colour for depth. If you place text on top, check its contrast against both the lightest and darkest parts of the gradient.
Frequently asked questions
Does this work in every browser?
Yes. Layered radial gradients are supported in every modern browser.
Can I animate a mesh gradient?
You can animate the positions with CSS custom properties registered with @property, but large animated gradients use a lot of processing power. A slow, subtle movement is best.
How do I avoid banding?
Smooth gradients over large areas can show faint steps of colour on some screens. Adding a little grain breaks those up.