Background Patterns

Pure-CSS background patterns — no SVG, no images. The pattern= attr applies a repeating gradient overlay. Stack on any surface= for depth.

Pattern presets

Grid

pattern="grid"

<div surface="glass" pattern="grid">…</div>

Dots

pattern="dots"

<div surface="glass" pattern="dots">…</div>

Stripes

pattern="stripes"

<div surface="glass" pattern="stripes">…</div>

Crosshatch

pattern="crosshatch"

<div surface="glass" pattern="crosshatch">…</div>

Checker

pattern="checker"

<div surface="glass" pattern="checker">…</div>

Diamonds

pattern="diamonds"

<div surface="glass" pattern="diamonds">…</div>

Customisation tokens

Override size & opacity

Dense grid

Large dots

<!-- Dense grid -->
<div pattern="grid" style="--aura-pattern-size:20px;--aura-pattern-opacity:0.15">…</div>

<!-- Large dots -->
<div pattern="dots" style="--aura-pattern-size:40px;--aura-dot-size:3px">…</div>

<!-- Angled stripes -->
<div pattern="stripes" style="--aura-stripes-angle:30deg;--aura-stripes-width:4px">…</div>

Stacked with gradients

Pattern + gradient hero

Hero section

gradient + pattern layered

<div gradient="ocean" pattern="dots" density="spacious" radius="xl">
  <h2 text="heading">Hero section</h2>
</div>