CSS Mesh Gradient Generator

How to use

1. 1Pick a preset like Aurora or Sunset to start from a polished mesh.
2. 2Drag any numbered marker on the live preview to move that color blob.
3. 3Adjust the color, spread, opacity, and X/Y for each point in the list below the preview.
4. 4Use Add point or Remove to grow or simplify the mesh (two to eight points).
5. 5Click Copy CSS, Copy classes, or Download SVG to use the gradient in your project.

About this tool

CSS Mesh Gradient Generator builds the soft multi-color backgrounds popularized by modern marketing sites and design systems, even though CSS has no native mesh-gradient primitive. The tool layers two to eight radial-gradient blobs on a single background-image, each anchored at an (x, y) point on the surface, blended over a solid base color. Drag any marker to reposition it on the live preview, pick a hex value from the per-point color input, tune the spread (how far the color reaches before fading) and the opacity (how strongly it tints the base), and the CSS, Tailwind arbitrary-class chain, and SVG export update on every change. Presets cover common looks (Aurora, Sunset, Ocean, Candy, Noir, Pastel) and the Randomize button samples a fresh palette from a curated set of accessible UI hues. The exported CSS uses pure radial-gradient syntax with rgba color stops fading to a transparent same-color stop, which is the recommended pattern for avoiding the muddy gray halo browsers can otherwise paint when interpolating colors through a transparent black. The Tailwind output pairs a background-color utility with an arbitrary background-image utility so the result drops straight into Tailwind v3 or v4 without a config change. The SVG export wraps each layer in an objectBoundingBox radialGradient so the file scales cleanly inside design tools. Mesh gradients are entirely on-device: the colors, positions, and CSS you generate never leave the browser.

Free to use. Works in your browser. No signup, no login.