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 免费无需注册

Gradient Mesh Generator

Create stunning CSS mesh gradients with draggable control points.

正在加载工具…

关于此工具

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.

使用方法

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.

关于此工具

使用方法

常见问题