Internal demo
Texture & pattern backgrounds
Every section below is pure CSS (or an inline SVG data URI). No image files. Scroll through and note which ones you want in the cookbook. Each section is labeled with its recipe.
Friendly, neutral sections
A radial-gradient dot grid at low opacity. Adds structure without clutter. Recipe: radial-gradient(circle, #94a3b8 1px, transparent 1px) at 22px tile, opacity 0.4.
Technical / product sections
Two crossed 1px linear-gradients. Good for AI, infrastructure, and dashboard products. Keep the line color barely visible — this one is at 6% opacity black.
The mask does the aesthetic work
Same grid as #2, but with mask-image: radial-gradient(...) so the pattern fades out toward the edges. Modern pattern sections look good because they fade, not because the pattern is fancy.
Callouts & comparison blocks
A repeating-linear-gradient at 135°. Use sparingly — this one is tinted to match the amber callout surface instead of fighting it.
The strongest default modern look
Three stacked layers: base color, a radial glow at the top, dots masked to fade downward, and 5% SVG noise on soft-light blend. This is the "hard to make it look bad" recipe.
Noise is the highest-leverage texture
A flat gradient reads as sterile; ~8–12% grain makes the same gradient feel intentional. The noise is an inline SVG feTurbulence data URI — zero image files.
Faux-topographic, premium editorial feel
A repeating-radial-gradient anchored off-center. Cheap stand-in for topographic-line SVGs; a real contour SVG tile is the upgrade if you want organic lines.
Consumer / friendly surfaces
Three absolutely-positioned circles with heavy blur() at ~30% opacity. Works for consumer, wellness, and kid-facing UIs. Keep them behind a relative content wrapper.
Almost invisible — and that's the point
Same noise SVG at 5% on multiply blend over warm stone. If a viewer consciously notices the noise, the opacity is too high. Compare this section against plain white above it.
CTA / footer transition sections
A conic-gradient checkerboard masked to appear only near the bottom edge — a nice way to lead into a footer.
Round 2
The ones we were missing
The Vercel / Linear look
Tiny "+" marks tiled from an inline SVG data URI, masked to fade at the edges. Reads as more designed than plain dots — a grid where only the intersections show. The current dev-tool aesthetic.
Major + minor gridlines
Two grids in one element: a faint 16px minor grid plus a darker 80px major grid (four background layers, two sizes). Much richer than a flat grid — reads as engineering paper. Great for spreadsheet/data products like ours.
Dots that shrink as they fall
Three dot layers (2.4px → 1.4px → 0.8px) with staggered vertical masks fake a halftone size ramp. Print-shop energy, pure CSS. Editorial and retro-modern brands love this.
Stage lighting from above
Three conic-gradient slivers anchored above the viewport, masked to fade down. Feels cinematic without any imagery — a strong alternative to the radial-glow hero in #5.
The Stripe-famous aurora wash
Four overlapping radial-gradients at different corners make a soft multi-color mesh, finished with grain. One CSS declaration replaces the giant blurry PNG most sites export from Figma for this.
Texture needs a landing zone
The blobs drift on 18–30s transform loops — cheap for the GPU, alive without being distracting. The card is the other half of the system: backdrop-blur + translucent white gives text a clean home on top of any texture.
Notebook / editorial sections
Horizontal rules every 32px plus a single red margin line. Warm and human — good for about pages, letters from the founder, and long-form content. Pairs well with a serif headline.
A floor, not a wallpaper
A plain CSS grid tilted with rotateX inside a perspective container, fading toward the horizon. Strong flavor — one per site, if at all.