# Texture & Pattern Background Demo

> Internal demo page: CSS-native texture and pattern recipes for section backgrounds.

Source: https://llamapress.ai/texture-demo | Updated: 2026-07-31

---

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.

1 — sparse dots

## 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.

2 — subtle grid

## 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.

3 — fading grid (radial mask)

## 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.

4 — fine diagonal stripes

## 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.

5 — dark hero: glow + fading dots + noise

## 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.

Example CTA button

6 — grain over gradient

## 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.

7 — contour rings

## 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.

8 — soft blobs

## 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.

9 — paper grain on light

## 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.

10 — checkerboard, fading upward

## 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

11 — plus / cross grid

## 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.

12 — graph paper

## 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.

13 — halftone fade

## 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.

14 — spotlight beams

## 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.

15 — mesh gradient

## 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.

16 — animated aurora + glass panel

## 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.

17 — ruled editorial lines

## 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.

18 — perspective horizon grid

## 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.