Mesh gradient generator
Drag color points to design a soft mesh gradient, adjust softness and base color, randomize palettes and copy pure CSS with layered radial gradients. No images.
background-color: #0F0A1E;
background-image:
radial-gradient(at 18% 22%, #8B5CF6 0px, transparent 55%),
radial-gradient(at 82% 18%, #22D3EE 0px, transparent 50%),
radial-gradient(at 70% 80%, #F472B6 0px, transparent 55%),
radial-gradient(at 20% 82%, #FACC15 0px, transparent 45%);
How to use it
- 1Drag the four color points, or focus one and use arrow keys.
- 2Pick colors and a base, and set how soft the blend is.
- 3Randomize for new palettes, then copy the CSS.
A mesh gradient in pure CSS
True mesh gradients interpolate color across a grid of points. CSS does not have one, but several layered radial-gradient()s fading to transparent over a base color get very close, stay tiny, and scale to any size without an image request.
Keep text readable on top by adding a dark or light scrim, or place content in a frosted panel from the glassmorphism generator. Add fine grain from the noise generator to prevent visible banding on large screens.
Animate it
For a living background, MiniDev UI's LightField draws a similar mesh in a small WebGL shader that drifts and follows the pointer, and pauses when off screen.
Light FieldmotionA WebGL shader background of drifting color silk with a soft cursor light and grain. It renders at half resolution, pauses offscreen and adapts to dark mode.npx shadcn@latest add ui.minidev.pro/r/light-field.jsonFrequently asked questions
Will a CSS mesh gradient slow my page?
No. Static gradients are drawn once by the browser. Avoid animating many large gradients, which forces repaints.
Why do I see banding?
Smooth gradients across large areas can show steps on 8 bit screens. A subtle noise overlay breaks up the bands.
Can I use it in Tailwind?
Yes. Put the CSS in a class, or use an arbitrary bg-[...] value for the background-image.