A grain texture in CSS, with no image file
A faint film grain makes flat gradients look printed, not rendered, and hides banding. How to make it with an inline SVG filter, and how strong it should be.
Digital gradients are too smooth. On dark screens they can band into visible steps, and even when they do not, they look rendered. A faint grain over the top makes them look like printed or photographed light, and it hides the banding.
The noise, as SVG
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<filter id="n">
<feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/>
</filter>
<rect width="100%" height="100%" filter="url(#n)"/>
</svg>feTurbulence generates noise; baseFrequency sets how fine it is; stitchTiles makes it repeat without seams.
The overlay
.grain::after {
content: "";
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,..."); /* the SVG above, URL-encoded */
opacity: 0.06;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
}Tuning
| Setting | Effect |
|---|---|
| opacity 0.03 to 0.08 | From barely there to clearly textured |
| baseFrequency 0.6 to 0.9 | Coarser to finer grain |
| mix-blend-mode overlay or soft-light | Grain that follows the colours beneath |
Where not to put it
- Over body text at any visible strength. It makes letters fuzzy.
- Over product screenshots, which should look sharp.
- Animated. Moving grain is film emulation, and it distracts.
Grain on light grounds
Grain is not only for dark themes. On a warm paper ground, a very faint grain with mix-blend-mode: multiply gives the page the feel of real paper. Keep it even lower than on dark, since dark specks on light show more readily.
Check it on real screens
Grain that looks right on a high-density laptop screen can look like dirt on a low-density monitor, and vanish on a phone. Look at it on at least two screens before settling on the opacity.
Grain pairs with a soft background; see an aurora background in CSS. For the wider rules of a dark premium look, see dark mode design tokens.
Glass Instrument UI has the grain as a recipe beside the aurora, so the texture is the same strength on every screen Claude builds.
Questions
How do I add a grain texture with CSS?
Use an SVG with an feTurbulence filter as a background image, usually inlined as a data URI, on an overlay element with low opacity. No image file is needed.
How strong should grain be?
Barely visible: often around 3 to 8 per cent opacity. If you notice it at a glance, it is too strong.
Does grain affect performance?
A static overlay costs little. Avoid animating the noise, and keep the overlay out of the way of pointer events.