NodlumePaper & grain · Noise
Vellum CSS texture
Vellum is a soft, low-frequency noise on a warm cream base: the turbulence is smoother than paper grain, so the surface mottles gently rather than speckling, the way parchment or a skin of translucent paper does. The warm base does half the work — the same noise on pure white reads as a dirty screen, and on cream it reads as a material.
It is a surface for invitations, certificates, menus, and any page that wants to feel printed rather than rendered. Dark text holds everywhere on it. It has no dark-mode equivalent — parchment is light — so give the dark theme a plain surface or Film grain, and let Vellum be a light-mode texture.
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 9%
- Frequency
- 0.25
- Octaves
- 2
- Tile
- 200px
- Base
- #fdf6e3
- Ink color
- color-mix(in oklab, var(--foreground) 9%, transparent)
CSS
.vellum {
position: relative;
isolation: isolate;
background-color: #fdf6e3;
}
.vellum::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.09;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px 200px;
}Tailwind
relative isolate bg-[#fdf6e3] before:absolute before:inset-0 before:-z-10 before:content-[''] before:opacity-[0.09] before:bg-[image:url("data:image/svg+xml,%3Csvg_xmlns='http://www.w3.org/2000/svg'_width='200'_height='200'%3E%3Cfilter_id='n'_x='0'_y='0'_width='100%25'_height='100%25'%3E%3CfeTurbulence_type='fractalNoise'_baseFrequency='0.25'_numOctaves='2'_stitchTiles='stitch'/%3E%3CfeColorMatrix_type='saturate'_values='0'/%3E%3C/filter%3E%3Crect_width='200'_height='200'_filter='url(%23n)'/%3E%3C/svg%3E")] before:bg-[size:200px_200px]Token
--texture-vellum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
--texture-vellum-size: 200px 200px;Vellum, answered
- How is the vellum texture made in CSS?
- Vellum 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 9% 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='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' 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 vellum 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 vellum texture be?
- Grain reads as paper fibre below about twelve percent and as dirt above it; this preset sits at 9%. Treat ten percent as the ceiling for any surface that carries body text, and lower it further behind small type.