Noise Texture Generator

Continue in the tool

More pages for this tool

noise overlay for dark mode

Noise Overlay for Dark Mode

Too much noise in dark mode does not read as texture, it reads as dirt on the screen, and the worst side effect is cutting the contrast between text and background exactly on the palette that already works with less available luminance. This page shows the opacity range and blend mode that keep the grain visible up close and invisible during normal reading.

Low opacity is what separates texture from a smudge

CSS or SVG noise normally comes from the `feTurbulence` filter, defined in the SVG filter effects standard, using `type="fractalNoise"` to avoid the sharp folds the `turbulence` mode produces; the `baseFrequency` attribute controls the pattern scale, so a high value produces fine, dense grain, while a low value produces larger, smoother blobs closer to fog than to film grain.
On a dark background, a layer opacity between 3% and 8% is already enough for the noise to break up the flat surface without competing with the text on top; above that range the overlay starts lightening pixels that should sit close to black, cutting the contrast ratio exactly where WCAG requires at least 4.5:1 for normal text and 3:1 for large text.
The blend mode matters just as much as opacity: `overlay` and `soft-light` tend to preserve dark tone because they darken where it is already dark and lighten only where it is already light, while `screen` always lightens, which in dark mode pushes the whole background to a gray lighter than intended.

Three dark layer combinations

Mono background, moderate contrast

Input: palette: mono, contrast: 18
Expected output: Overlay de grão fino em cinza, opacidade próxima de 5%, blend soft-light

A contrast of 18 sits in the tool mid range, enough to add texture without lightening the base black.

Dark card with small text

Input: palette: mono, contrast: 8, blend: overlay
Expected output: Grão quase imperceptível sob leitura normal, visível só em zoom

Low contrast is the right call when the card carries small text, since there is less contrast budget left to spend on noise.

Decorative dark header

Input: palette: mono, contrast: 30, blend: soft-light
Expected output: Grão perceptível a olho nu, textura de fundo claramente presente

A contrast of 30 is already high enough to notice unaided; it works behind a large heading but should not sit behind a running paragraph.

Full tool FAQ

Can SVG noise replace a PNG image?

For many backgrounds, yes: SVG stays editable and scales losslessly. But very dense textures produce large markup that can end up heavier than an optimized bitmap, in those cases, rasterizing to PNG/WebP may pay off.

What does the seed control?

Can noise hurt accessibility?

When should texture be used in UI?

Why export as SVG?

Is more contrast always better?

Is the texture truly random?

Does the tool work without a backend?

Frequently asked questions

What is the safe maximum opacity in dark mode with small text?

Stay near 3% to 5%: small text already has fewer contour pixels per letter, so any background lightening caused by the noise cuts legibility faster than it would on a large heading.

`overlay` or `soft-light`, which pairs better with a dark background?

`soft-light` usually gives a gentler result in dark mode because the contrast curve it applies is less aggressive; `overlay` tends to sharpen the gap between the already dark tones and the noise bright points more.

Does the noise need to cover the whole screen or just part of it?

Covering just the card, section or header area already delivers the visual effect; applying it across the full screen multiplies rendering cost with no perceptible gain, since the noise pattern repeats either way.

How do you know an overlay has gone too far in dark mode?

Test with the lightest text over the darkest background in the palette: if reading gets tiring within a few seconds or the measured contrast ratio drops below 4.5:1, the noise opacity or contrast needs to come down.

Next steps