NodlumePaper & grain · Noise
Paper grain CSS texture
Paper grain is the quietest texture there is: a fine, desaturated speckle laid over the page background at around eleven percent, so a flat fill reads as a sheet of paper without a single visible line. It is generated by an inline SVG turbulence filter, which means no image request, a seamless tile, and crispness at every pixel density — and it is the texture this site's own surfaces use.
It belongs under long-form reading, documentation, and any light interface that feels too clinical as pure white. Keep it under about twelve percent; above that the fibre becomes dirt. In dark mode invert the overlay rather than the tile, and never put grain behind small text at high opacity — it lowers legibility without raising contrast.
Under text
Reading-size copy on the texture, so the alpha is judged by legibility rather than by taste.
A card on top
Separated without a second border.
Recipe
- Kind
- Noise
- Ink
- theme foreground at 11%
- Frequency
- 0.6
- Octaves
- 4
- Tile
- 160px
- Ink color
- color-mix(in oklab, var(--foreground) 11%, transparent)
CSS
.paper-grain {
position: relative;
isolation: isolate;
}
.paper-grain::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.11;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}Tailwind
relative isolate before:absolute before:inset-0 before:-z-10 before:content-[''] before:opacity-[0.11] before:bg-[image:url("data:image/svg+xml,%3Csvg_xmlns='http://www.w3.org/2000/svg'_width='160'_height='160'%3E%3Cfilter_id='n'_x='0'_y='0'_width='100%25'_height='100%25'%3E%3CfeTurbulence_type='fractalNoise'_baseFrequency='0.6'_numOctaves='4'_stitchTiles='stitch'/%3E%3CfeColorMatrix_type='saturate'_values='0'/%3E%3C/filter%3E%3Crect_width='160'_height='160'_filter='url(%23n)'/%3E%3C/svg%3E")]Token
--texture-paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");Paper grain, answered
- How is the paper grain texture made in CSS?
- Paper grain is an inline SVG turbulence tile, applied on a pseudo-element with an opacity — no image request, a seamless repeat, and crisp at every pixel density. Its ink is the theme's foreground color mixed to 11% with color-mix, so the same declaration re-tints itself when the theme switches between light and dark mode. The full declaration is url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") — copy the CSS rule, the Tailwind classes or the custom property above, or open it in the playground to change the pitch, the ink or the alpha.
- How do I use the paper grain texture in Tailwind CSS?
- Copy the Tailwind tab: noise needs a pseudo-element, so the output is a before: stack — relative and isolate on the element, then before:absolute, before:inset-0, before:-z-10, an opacity and the tile as before:bg-[image:…]. Tailwind v3 and v4 both accept the arbitrary values; for a value you reuse, register the Token tab's custom property instead.
- How subtle should the paper grain texture be?
- Grain reads as paper fibre below about twelve percent and as dirt above it; this preset sits at 11%. Treat ten percent as the ceiling for any surface that carries body text, and lower it further behind small type.