CSS · multi-point blend
Mesh gradient generator
Stack several radial gradients into a mesh-style hero background, tune four corner colors, and copy the CSS in one click. Good for landing pages when a single linear gradient feels flat.
CSS
Why this tool exists
Mesh gradients sell depth without image assets. They are also finicky to write by hand — one wrong stop and the banding shows on cheap displays.
How to use it
- Adjust the four color inputs — watch the live preview update.
- Tweak until banding disappears on your target monitor.
- Copy CSS and paste into your hero section or design token doc.
- Validate text contrast on top using the contrast checker.
Use a different tool when…
You need a single brand flat fill — use solid HEX or a simple two-stop linear gradient.
Practical tips
- Mesh uses layered radial gradients — not true CSS mesh() yet in all browsers.
- Dark text needs light areas; add a scrim if contrast fails.
- Export PNG screenshots for slides if email clients strip complex CSS.
FAQ
Is this true CSS mesh gradient?
It approximates mesh with multiple radial-gradient layers for broad browser support.
Can I add more than four colors?
Four points in this version — duplicate CSS manually for more layers.
Why do I see banding?
Try closer colors or add noise in design tools; 8-bit displays band more.
Will this work in email?
Most clients strip complex backgrounds — use a flattened PNG for email.
Can I animate the mesh?
Not here — animation needs custom keyframes and may hurt performance.