Mesh gradient generator for CSS and React
Build a soft mesh gradient background from layered radial gradients and export it as CSS, Tailwind or a React component. Free to use, no account.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this generator
A mesh gradient is a stack of radial gradients, each centred on a colour point, that blend into a soft multi-colour background. This generator lets you drag the colour points on the canvas, set the softness, add a grain overlay to hide banding and turn on a slow drift animation.
Colours can come from your theme tokens or be custom, so the mesh follows light and dark mode. The output is plain CSS custom properties and a class, a Tailwind arbitrary-value class or a TSX component, and a PNG or WebP poster for social cards. Nothing needs an animation library.
The state lives in the URL, so a link to the page keeps your mesh.
How to use it
- Pick a preset or add colour points on the canvas.
- Drag the points and tune softness and grain.
- Switch the colours to your theme tokens if you want light and dark support.
- Copy the CSS, the Tailwind class or the React component.
This generator is also a component of the kit: Generator Gradient Mesh, installed as source in your project.
Want this inside your project?
Agentic UI Kit installs this generator and the other 1156 components as source files, with one theme for all of them. One-time license, unlimited projects.