Patterns

Background recipes and textures—clouds, dots, grids, plaid, rays, and subtle noise overlays.

The recipes below are pure CSS backgrounds. They’re designed to be:

Copy/pasteable
Easy to tweak (size, colors, intensity)
Composable (you can stack multiple recipes)

Open /editor in another tab and tweak one parameter at a time.

Recipe Mindset

Start with the big shapes (tiles, stripes, rays).
Add subtle overlays last (noise, hatch, tint) to avoid flatness.
Keep patterns theme-friendly (alpha + neutral hues).

Soft Clouds (Mesh-like)

This approximates a “mesh gradient” using multiple radial gradients.

background:
  radial-gradient(circle at 20% 30%, rgb(99 102 241 / 0.55), transparent 55%),
  radial-gradient(circle at 80% 25%, rgb(34 211 238 / 0.45), transparent 55%),
  radial-gradient(circle at 75% 80%, rgb(245 158 11 / 0.45), transparent 60%),
  radial-gradient(circle at 25% 75%, rgb(124 58 237 / 0.45), transparent 60%),
  var(--ui-bg);

Tuning knobs:

Move the at X% Y% points to change the “blobs”.
Increase/decrease alpha to control intensity.
Add a subtle noise overlay to reduce banding: /guide/patterns#noise-overlay.

Tie-in: /generator/mesh-gradient

Gradient Texture

Dots (polka / subtle texture)

background:
  radial-gradient(circle, rgb(255 255 255 / 0.22) 2px, transparent 2.5px) 0 0 / 18px 18px,
  #0b1020;

Tuning knobs:

Dot radius (2px).
Tile size (18px 18px).
Dot alpha.

Geometric shards

background:
  radial-gradient(circle at 23% 44%, #00000014 46.32%, transparent 0),
  linear-gradient(357deg, #00000015 58.15%, transparent 0),
  radial-gradient(circle at 101% 108%, #00000015 71.04%, transparent 0),
  radial-gradient(circle at 22% 19%, #00000015 40.39%, transparent 0),
  linear-gradient(184deg in oklab, #26C6DA 0%, #00ACC1 100%);

This kind of pattern is usually built from hard stops and careful alignment. If you want a fast starting point, use the unified gradient texture generator:

Tie-in: /generator/gradient-texture

Tips for manual tweaks:

Prefer crisp edges (hard stops) over smooth transitions.
If you see seams, adjust background-size to avoid fractional pixels.

Stripes, Grids, and Tiles

Stripes (clean + reliable)

Diagonal stripes

background:
  repeating-linear-gradient(
    135deg,
    rgb(255 255 255 / 0.14) 0 10px,
    rgb(255 255 255 / 0) 0 20px
  ) #0b1020;

Tuning knobs:

Angle (45deg / 135deg / etc).
Stripe width (10px / 20px).
Use subtle alpha for a “texture” look.

Checkerboard (tiles)

Conic-gradient checkerboard

background: conic-gradient(
  from 90deg,
  rgb(255 255 255 / 0.14) 0 90deg,
  rgb(255 255 255 / 0) 0 180deg,
  rgb(255 255 255 / 0.14) 0 270deg,
  rgb(255 255 255 / 0) 0
) 0 0 / 28px 28px #0b1020;

Expected output: a checkerboard-like tile pattern.

Grid / graph paper

Minor grid + major grid

background:
  /* minor grid */
  linear-gradient(rgb(255 255 255 / 0.10) 1px, transparent 1px) 0 0 / 20px 20px,
  linear-gradient(90deg, rgb(255 255 255 / 0.10) 1px, transparent 1px) 0 0 / 20px 20px,
  /* major grid */
  linear-gradient(rgb(255 255 255 / 0.18) 1px, transparent 1px) 0 0 / 100px 100px,
  linear-gradient(90deg, rgb(255 255 255 / 0.18) 1px, transparent 1px) 0 0 / 100px 100px,
  #0b1020;

Good for: tutorials, debug overlays, and subtle backgrounds behind text.

Diamonds / argyle

Diamond tiles (conic-gradient trick)

background:
  conic-gradient(
    from 45deg,
    rgb(255 255 255 / 0.14) 0 90deg,
    rgb(255 255 255 / 0.00) 0 180deg,
    rgb(255 255 255 / 0.14) 0 270deg,
    rgb(255 255 255 / 0.00) 0
  ) 0 0 / 40px 40px #0b1020;

To push it toward “argyle”, add a thin diagonal line layer on top.

Plaid

Plaid is basically “two stripe systems” with alpha so overlaps get darker.

Gingham (simple plaid)

background:
  repeating-linear-gradient(
    0deg,
    rgb(255 255 255 / 0.12) 0 16px,
    rgb(255 255 255 / 0) 0 32px
  ),
  repeating-linear-gradient(
    90deg,
    rgb(255 255 255 / 0.12) 0 16px,
    rgb(255 255 255 / 0) 0 32px
  ),
  #0b1020;

Tuning knobs:

Stripe widths (16px / 32px).
Stripe alpha (controls intersection darkness).

Tartan-ish (varied stripes + accents)

background:
  /* horizontal stripes */
  repeating-linear-gradient(
    0deg,
    rgb(255 255 255 / 0.10) 0 14px,
    rgb(255 255 255 / 0.00) 0 24px,
    rgb(245 158 11 / 0.18) 0 28px,
    rgb(255 255 255 / 0.00) 0 44px
  ),
  /* vertical stripes */
  repeating-linear-gradient(
    90deg,
    rgb(255 255 255 / 0.10) 0 10px,
    rgb(255 255 255 / 0.00) 0 22px,
    rgb(99 102 241 / 0.18) 0 26px,
    rgb(255 255 255 / 0.00) 0 44px
  ),
  #0b1020;

This isn’t “authentic tartan” — it’s a CSS-friendly approximation. The recipe is about the technique: varied widths + small accents.

Rays and Hatching

Sunburst / rays

Centered hero rays with a vignette

background:
  radial-gradient(circle at 50% 50%, rgb(0 0 0 / 0) 0 40%, rgb(0 0 0 / 0.55) 80%),
  repeating-conic-gradient(
    from 0deg,
    rgb(255 255 255 / 0.22) 0 12deg,
    rgb(255 255 255 / 0) 12deg 24deg
  ),
  #0b1020;

Tuning knobs:

Ray count = smaller angle steps.
Contrast = alpha values.
Center = at X% Y% in the radial layer.

Hatching / crosshatch (paper texture)

background:
  repeating-linear-gradient(
    45deg,
    rgb(128 128 128 / 0.18) 0 2px,
    transparent 2px 10px
  ),
  repeating-linear-gradient(
    -45deg,
    rgb(128 128 128 / 0.16) 0 2px,
    transparent 2px 12px
  ),
  #0b1020;

Tip: keep it subtle. Hatch patterns overpower content quickly.

Noise Overlay

Noise helps:

Reduce visible banding on smooth gradients
Make patterns feel less “computer-perfect”
Hide subtle seams in large flat areas

Small SVG noise tile (data URL)

background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.44'/%3E%3C/svg%3E")
    0 0 / 160px 160px repeat,
  linear-gradient(135deg, #7c3aed, #06b6d4);

background-blend-mode: overlay, normal;

Tuning knobs:

baseFrequency: “grain size”
opacity: strength
Blend mode: try overlay or soft-light

Recap

Patterns are mostly gradients + layering + deliberate sizes.
Use alpha to keep patterns subtle and theme-friendly.
If you see seams, adjust sizes to avoid fractional pixels.

Continue with Best Practices.
Need inspiration? Browse /explore for different CSS background styles and patterns.

Gradients

Treat gradients as background images—learn stops, hard edges, repeating, and the linear/radial/conic building blocks.

Best Practices

Debug backgrounds systematically and keep them performant, consistent, and maintainable.