How is the mesh rendered?

Each colour stop becomes a CSS radial-gradient positioned at its x/y with the chosen spread radius, all composited on top of the base colour. Modern browsers handle multiple stacked radial-gradients efficiently so the result is GPU-accelerated and resolution-independent.

Why does adding more stops help?

Each stop adds another coloured blob, which fills gaps and increases the sense of colour blending. The tool caps at six stops because beyond that the CSS becomes long and the visual gain is minimal — bump the overlap and noise instead.

What does the noise overlay do?

It applies an SVG feTurbulence filter (a W3C filter primitive) over the gradient, breaking up the smooth colour transitions and adding tactile grain. Use 5–15% for subtle texture; higher values look noisy and hurt readability of any overlaid text.

Is the CSS output safe to paste into a stylesheet?

Yes. It uses standard CSS background-image with multiple radial-gradient() functions, plus an inline data: URI for the noise. Modern browsers render it without any vendor prefixes or JavaScript.

Mesh Gradient Generator

Design beautiful, fluid mesh gradients with optional noise textures

Color Stops

Base Color

#1e1e1e

Position X0%

Position Y0%

Spread Radius50%

Position X100%

Position Y0%

Spread Radius60%

Position X0%

Position Y100%

Spread Radius70%

Position X100%

Position Y100%

Spread Radius50%

Texture (Noise / Grain)

Noise Opacity0%

Noise Frequency0.8

CSS Output

background-color: #1e1e1e;
background-image: radial-gradient(circle at 0% 0%, #ffb199 0%, transparent 50%), radial-gradient(circle at 100% 0%, #ff0844 0%, transparent 60%), radial-gradient(circle at 0% 100%, #667eea 0%, transparent 70%), radial-gradient(circle at 100% 100%, #764ba2 0%, transparent 50%);

Mesh Gradient Generator

Color Stops

Texture (Noise / Grain)

CSS Output

Creating Modern Mesh Gradients with CSS and SVG

Aspect Ratio Calculator

Border Radius Generator

Box Shadow Generator

CSS Grid Generator

CSS Spring Physics Generator

Cubic Bezier / Easing Generator

Color Stops

Texture (Noise / Grain)

CSS Output

Related guides

Creating Modern Mesh Gradients with CSS and SVG

Related tools

Aspect Ratio Calculator

Border Radius Generator

Box Shadow Generator

CSS Grid Generator

CSS Spring Physics Generator

Cubic Bezier / Easing Generator