Noise Gradient Background Generator

Free noise-gradient background generator. SVG feTurbulence grain layered over gradients, with blend modes and random palettes — copy CSS or use the live preview.

Gradient

Type135°

Color 1

Color 2

Color 3

Enable third color

Noise

Noise Opacity30%

Noise Scale120%

Blend Mode

Resolution

CSS

.noise-gradient {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'256'%20height%3D'256'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.8'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E"), linear-gradient(135deg, #0f172a, #3b82f6, #22d3ee);
  background-size: 120px 120px, cover;
  background-blend-mode: overlay, normal;
}

💡 Noise texture is generated locally via SVG feTurbulence — no external images

💡 Noise scale is the tiling size of the texture — larger values give coarser grain

FAQ

How is the noise made?

An SVG feTurbulence filter generates random grain, inlined as a data URI — no image files, resolution independent.

Can I export an image?

The current version exports CSS. For an image, screenshot the preview or export the composited background via devtools.

Why add noise to gradients?

Grain eliminates gradient banding, making transitions look smoother and more premium — a modern web design staple.