What is a CSS mesh gradient?

A mesh gradient is a background made from multiple overlapping radial gradients positioned at different points, creating a smooth, multi-color blend that looks like a painted canvas. CSS achieves this with layered radial-gradient() calls.

Will this CSS work in all browsers?

Yes. The output uses standard CSS radial-gradient() syntax supported in all modern browsers including Chrome, Firefox, Safari, and Edge.

Can I add more control points?

The tool provides up to 9 control points arranged in a 3×3 grid. You can toggle each point on or off and assign it any color to build the mesh you need.

How do I use the copied CSS?

Paste the CSS value into the background property of any element in your stylesheet, for example: .hero { background: ; }

Design Free No signup

Gradient Mesh Generator

Create stunning CSS mesh gradients with draggable control points.

Loading tool…

About this tool

The Gradient Mesh Generator lets you build complex, organic-looking CSS backgrounds using multiple overlapping radial gradients. Drag control points on the interactive grid to reposition gradient centers, pick any color for each point, and watch the live preview update instantly. Choose from curated preset mesh themes—Aurora, Sunset, Ocean, or Forest—or hit Randomize to discover unique combinations. When you're happy, copy the generated CSS background property and drop it straight into your stylesheet.

How to use

1 Click a control point circle on the grid to select it.
2 Use the color picker to assign a color to that point.
3 Drag the point to reposition the gradient center.
4 Enable or disable individual points with their toggle.
5 Click a Preset button for an instant themed mesh.
6 Press Randomize to generate a random color combination.
7 Click Copy CSS to copy the background property to your clipboard.

Frequently Asked Questions

Related tools

Color Harmonics

Generate complementary, triadic, and other color palettes from any base color.

CSS Gradient Generator

Visually build CSS linear and radial gradients and copy the ready-to-use CSS property.