Atmosphere, not flat fills

Layer gradient, pattern and grain that fit the aesthetic.

From frontend-design: create atmosphere and depth, not solid colors.

Build the stack

Add layers one by one, then explode the stack.

Solid fillBad
Field notes · Vol. 3 Light through fog
background: #fff
LayeredFlat
Field notes · Vol. 3 Light through fog
0 / 4 layers

Match texture to direction

Pick a direction and see which textures fit.

Paper grainFits
ScanlinesMismatch
Fine rulesMismatch
.paper::after { background-image: url("data:image/svg+xml,…feTurbulence…"); opacity: .35; }
.crt::after   { background: repeating-linear-gradient(0deg, rgb(0 0 0 / .35) 0 1px, transparent 1px 3px); }
.print::after { background: repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 24px); opacity: .12; }

Grain hides gradient banding

Exaggerate, then raise grain until the steps vanish.

Gradient onlyBad
radial-gradient(…)
Gradient + grainGood
grain 10% · baseFrequency 0.85

Why it matters, pros and cons

Why it matters

A solid fill reads as a default; texture sets the tone before any word.

Pros

  • Depth without adding content
  • Grain hides gradient banding
  • CSS and inline SVG, no image requests

Cons

  • Texture behind dense text costs contrast
  • backdrop-filter overlays cost paint on weak devices
  • Working tools usually want quiet, flat surfaces