NodlumeCSS background pattern generator
Build a pure-CSS background texture — paper grain, a dot grid, graph paper, stripes, a crosshatch, a checkerboard — tune its pitch, line and alpha, and judge it the only way that counts: with body text on top of it. The ink mixes from your theme's foreground by default, so one declaration re-tints itself in dark mode. Copy the result as a CSS rule, Tailwind classes, or a custom property. No account is needed. For when each texture is the right choice, read the background texture guide.
No images, no requests
Every texture is a declaration: repeating gradients for lines, dots and checkers, and an inline SVG turbulence tile for grain. Nothing is fetched, nothing blurs on a high-density display.
Ink from the theme
The ink is a few percent of the foreground, mixed with color-mix, so the same texture is dark on a light page and light on a dark one. A fixed color is there for the textures that are a color by definition.
Judged under text
A swatch with nothing on it cannot tell you whether a paragraph survives the texture. The Under text preview puts real body copy on it, so the alpha is set by reading, not by taste.
Named textures, ready to copy
19 starting points, each on its own page with the recipe, the CSS, the Tailwind classes, and where it belongs. Every one opens in the playground above with its settings loaded.
Paper & grain
Grids & rulings
Stripes & rulings
Weaves & fabric
Geometric
- CheckerboardAlternating faint squares, the universal transparency grid.
- Polka dotsBigger dots on a wider grid, a pattern rather than a canvas.
- HalftoneDense dots at a tight pitch, the printed-screen effect.
- Diamond latticeHairlines crossed at ±45°, a trellis of diamonds.
- Drafting crosshatchA steeper crosshatch at 60°, the shading of a technical drawing.
CSS background textures, answered
- How do I make a noise or grain texture in CSS without an image?
- With an inline SVG turbulence filter as a data URI: an feTurbulence element with a fractalNoise type generates the speckle, an feColorMatrix desaturates it, and a rect fills the tile. Applied as the background-image of a pseudo-element with an opacity of around 0.1, it reads as paper grain; there is no image request, the tile repeats seamlessly with stitchTiles, and it stays crisp at every pixel density. The Noise kind here generates exactly that, with the frequency, octaves and tile size as sliders.
- Why mix the texture's ink from the theme foreground?
- A texture drawn in a fixed gray is right in one color mode and wrong in the other — a light gray grid disappears on a light page and glares on a dark one. Mixing the ink from the theme's foreground with color-mix means the same declaration re-tints itself when the theme switches modes: a few percent of the foreground is dark on light and light on dark automatically. That is the default here, and a fixed color is offered for textures that are a color by definition, like a blueprint.
- How subtle should a CSS background texture be?
- Most textures work between three and ten percent of the foreground. Grain can reach about twelve percent before it reads as dirt, and dots need slightly more than lines because a single pixel of ink reads fainter than a full rule. Where two layers cross, as in a grid or a crosshatch, the crossings stack to roughly double strength, so halve the per-layer value. The Under text preview is the honest check: if the paragraph reads harder than on a flat surface, the alpha is too high.
- Does the Tailwind output work with Tailwind v4?
- Yes. The line and dot textures emit one or two arbitrary-value classes, bg-[image:…] for the gradient and bg-[size:…] for the pitch, with spaces written as underscores, which is the v3 and v4 grammar for a one-off value. Noise needs a pseudo-element, so it emits a before: stack instead. For a value you reuse, copy the Token tab and register the custom property in your theme.
Put it on a theme
A texture mixed from the foreground is only as good as the foreground it mixes from. Build the eight-role palette first with the palette generator, and read the texture guide for when grain, a ruling, a weave or a geometric repeat is the right surface.