Back

Background

CSS pattern variants

Use var(--text-base) as the pattern color — adapts to light/dark mode automatically.

dots
grid
lines
crosses

Rich variants

mesh
blob
noise
gradient

Opacity (dots)

3%
7%
15%

Usage

// Inside a relative parent (absolute positioning)
@layout.Background(layout.BackgroundProps{
    Variant: "dots",  // "dots"|"grid"|"lines"|"crosses"|"mesh"|"blob"|"noise"|"gradient"
    Opacity: 7,       // 0–100, default 7
    Size:    "28px",  // spacing for CSS-pattern variants
})

// Full-viewport page background layer
@layout.Background(layout.BackgroundProps{
    Variant: "dots",
    Fixed:   true,
})