CSS Noise Generator

About CSS noise generator

Make a film-grain or cloudy texture from an SVG feTurbulence filter and lay it over any element using a pseudo-element. Pick a noise type, tune frequency, octaves and seed, choose a blend mode, and copy either the CSS or the raw SVG. It is for designers who want a subtle tactile finish on flat gradients.

How to use it

1. Click one of the Noise type buttons: grain, cloudy, marble or wood. Each loads its own frequency and octave settings.
2. Refine with Frequency X, Frequency Y, Octaves, Seed and Opacity.
3. Pick a Blend mode such as overlay, multiply, screen or soft-light.
4. Look at the preview over the purple gradient.
5. Open the CSS tab or the SVG tab in Output and copy the code.

The cloudy preset in the SVG output

Type cloudy, seed 2

type="fractalNoise" baseFrequency="0.015 0.015" numOctaves="6" seed="2" stitchTiles="stitch"

When to use it

• Adding grain to a flat gradient hero so it stops looking plastic.
• Creating a paper-like texture behind long-form article text.
• Faking a cloudy sky or smoke backdrop without a photograph.
• Overlaying a subtle wood-streak texture on a card.

Questions about CSS noise generator

What is the difference between grain and the other types?

Grain uses the turbulence noise type at a high frequency of 0.65 for fine speckle. Cloudy, marble and wood use fractalNoise at lower frequencies, and wood stretches the noise so it forms streaks.

Why is the noise gray rather than colored?

The filter adds a saturation matrix set to zero, which strips the color channels and leaves neutral gray noise that works cleanly with blend modes.

Where does the Opacity slider end up in the output?

In the CSS tab it is set once, on the ::after rule, and the embedded SVG carries no opacity of its own, so 40 percent on the slider is 40 percent on the page. The SVG tab is a standalone image, so there the value is written on its rectangle.

What does the CSS tab produce?

A .noisy class with position relative and a ::after layer using the encoded SVG as a background image, plus a single opacity value, mix-blend-mode and pointer-events none so clicks pass through.

Does the pattern tile?

Yes. The filter uses stitchTiles, and the tile is 300 by 300 pixels, so repeating it does not show seams.

Related tools

• CSS filter generatorCombine blur, brightness, contrast, hue-rotate, saturate, sepia and more with a live image preview
• SVG wave generatorCreate layered SVG wave dividers — export as inline SVG markup or CSS background-image data URI
• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview
• Glassmorphism generatorCreate frosted-glass effects with backdrop blur, transparency, and border controls — live preview included
• Neumorphism generatorBuild soft-UI neumorphic elements with dual box-shadows derived from a single base color