CSS Noise Grain Overlay
Generate SVG noise overlay CSS for subtle grain texture.
Add subtle grain texture
A faint noise or grain overlay adds warmth and depth to flat backgrounds and gradients, softening the digital-perfect look. This generator produces an SVG-noise overlay as a CSS background so you can layer texture without an image file.
Because the noise is generated as an inline SVG, there is no extra asset to load and the intensity is easy to tune. Adjust the opacity and scale, then copy the CSS to layer a tasteful grain over any surface.
Copy-ready grain
The grain is an inline SVG turbulence filter used as a background, adding texture with no extra image request. Built in your browser.
Frequently asked questions
How is the grain made?
An inline SVG with an feTurbulence fractal noise filter is URL-encoded into a data URI and used as a background image, so there is no image file to host.
What does the input number control?
The noise opacity, from 0 to 1. The default 0.65 is visible on dark backgrounds; with the overlay blend mode, 0.2 to 0.4 is often enough for a subtle texture.
Why doesn't the ::after overlay cover my element?
The pseudo-element is absolutely positioned with inset: 0, so the parent needs position: relative. pointer-events: none keeps it from blocking clicks.
Related tools
Practical utilities for front-end design and implementation work.