About the Mesh Gradient Generator
Create a mesh-like background from layered radial gradients. Each point has its own color, position, and spread so you can build soft organic backgrounds without an image editor.
Mesh Gradient Generator
Build soft multi-point color fields with layered radial gradients. Move each focal point, tune its spread, and copy CSS without uploading anything.
background: radial-gradient(circle at 18% 20%, #7c3aed 0%, transparent 55%), radial-gradient(circle at 82% 18%, #06b6d4 0%, transparent 52%), radial-gradient(circle at 24% 82%, #f472b6 0%, transparent 52%), radial-gradient(circle at 80% 80%, #facc15 0%, transparent 48%), #0f172a;How to create a mesh gradient
- 1
Set the canvas color
Choose the background color that sits behind all gradient points.
- 2
Edit gradient points
Change each point color and move its X and Y position.
- 3
Adjust spread
Increase or reduce the point size to control how much each color blends into the background.
- 4
Copy the CSS
Copy the layered radial-gradient declaration into your project.
Mesh gradient questions
Is this a true WebGL mesh gradient?
No. This version approximates a mesh look with layered CSS radial gradients, which keeps the output portable and copyable.
How many points can I use?
The editor supports multiple points and keeps at least two active points.
Can I use the CSS in React or Tailwind projects?
Yes. The generated CSS can be applied through a style object, stylesheet, CSS module, or a custom Tailwind utility.