NodlumeGrids & rulings · Grid
Blueprint CSS texture
Blueprint is the same grid as graph paper with the colors reversed: faint white rules on a deep blue base, the cyanotype sheet architects printed drawings on for a century. It is the one grid that carries its own color, which is why its ink is a fixed white rather than the theme's foreground — a blueprint is blue in both modes or it is not a blueprint.
It works as a hero or section background for anything technical, and as the surface of an architecture or floor-plan tool. White text holds on it at every size. Keep the rules faint — at twenty percent they become the content — and pair it with a single warm accent, since every cool color disappears into the base.
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
- Grid
- Ink
- #ffffff at 12%
- Pitch
- 24px
- Line
- 1px
- Base
- #1e3a8a
- Ink color
- rgb(255 255 255 / 12%)
CSS
.blueprint {
background-color: #1e3a8a;
background-image: repeating-linear-gradient(0deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 24px),
repeating-linear-gradient(90deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 24px);
}Tailwind
bg-[#1e3a8a] bg-[image:repeating-linear-gradient(0deg,_rgb(255_255_255_/_12%)_0_1px,_transparent_1px_24px),_repeating-linear-gradient(90deg,_rgb(255_255_255_/_12%)_0_1px,_transparent_1px_24px)]
Token
--texture-blueprint: repeating-linear-gradient(0deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 24px);
Blueprint, answered
- How is the blueprint texture made in CSS?
- Blueprint is two repeating linear gradients, horizontal and vertical, crossed at the same pitch and alpha. Its ink is a fixed #ffffff at 12%, because this texture is a color by definition and should paint the same in both modes. The full declaration is repeating-linear-gradient(0deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 24px) — 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 blueprint texture in Tailwind CSS?
- Copy the Tailwind tab: it is one or two arbitrary-value classes, bg-[image:…] for the gradient and bg-[size:…] for the pitch where the kind needs one, with spaces written as underscores. Tailwind v3 and v4 both accept the form. For a value you reuse across the site, register the Token tab's custom property in your theme and reference it from a utility.
- How subtle should the blueprint texture be?
- Most line textures work between three and eight percent of the foreground; this preset sits at 12%. Where two layers cross, the crossings stack to roughly double strength, so halve the per-layer alpha you would use for a single stripe.