Pattern Background
betaDots, a grid, ruled lines, diagonal stripes, a checker or fine grain behind content, in a theme colour, with optional drift — CSS only.
- Effects & motion
- 1 file
- 1 npm package
- Accessibility notes
- 3 looks in Backgrounds
Loading the example…
pnpm dlx @dowel-ui/cli add pattern-backgroundnpm packages installed: class-variance-authority.
import { PATTERN } from "@/components/ui/pattern-background";Default
All Patterns
Drifting
<PatternBackground>
| Prop | Type | Default |
|---|---|---|
colorThe pattern colour: a token ("border", "primary") or any CSS colour. Default "border". | string | "border" |
driftSlowly slide the pattern diagonally. Default false. | boolean | false |
driftDurationSeconds per cell of drift. Default 3. | number | 3 |
fade | "none" | "edges" | "top" | "bottom" | "none" |
opacityStrength of the pattern, 0–1. Default 1; grain reads best around 0.2. | number | 1 |
patternWhat to draw. Default "dots". | PatternBackgroundPattern | "dots" |
sizeThe repeat, in pixels. Default 24. | number | 24 |
thicknessDot radius or line width, in pixels. Default 1. | number | 1 |
Plus every attribute of <div>.
Pure decoration: the pattern is aria-hidden and takes no pointer events, and children render above it in their own layer. Drift is off by default; when on it moves only by transform, pauses off-screen, and under reduced motion stops on a frame identical to the first. In forced-colours mode the pattern is removed. Keep text contrast against the background colour, not the pattern: use a low opacity behind body text.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes