BackgroundPattern
Decorative CSS-gradient texture layer for behind-content surfaces — dot grid or line grid, absolutely positioned behind real content.
BackgroundPattern renders a decorative dot-grid or line-grid CSS gradient, absolutely positioned (inset: 0; z-index: 0) and non-interactive (pointer-events: none). Place it as the first child of a position: relative container, with real content stacked above it.
BackgroundPattern
Use when: Subtle static texture behind content — no raster image, no motion, no reduced-motion handling.
Don't: You want a living, moving background on a Premium surface — that's AmbientField.
<BackgroundPattern variant="dot-grid" />AmbientField
Use when: Premium-tier motion field (Lottie or canvas) that freezes to a poster frame under reduced motion.
Don't: A non-Premium surface, or texture you want for free — that's BackgroundPattern.
<AmbientField src={fieldLoop} />MediaBand
Use when: The band container that hosts a decorative layer and owns the stacking + clip recipe.
Don't: You just need the texture layer, not the surrounding band.
<MediaBand graphic={<BackgroundPattern fade />} />Use it for
- Section or card backgrounds that need subtle texture without a raster image
- Hero / empty-state surfaces where a flat fill reads too plain
Not for content that needs to be legible on its own — BackgroundPattern has no content slot; it is always a decorative layer behind other markup.
Import
import { BackgroundPattern } from '@brikdesigns/bds';Variants
Dot grid
Radial-gradient dots at a fixed pitch.
<BackgroundPattern variant="dot-grid" />Line grid
Linear-gradient grid lines at the same pitch.
<BackgroundPattern variant="line-grid" />Diagonal
Repeating 45° slash-hatch, same line color and pitch as line grid.
<BackgroundPattern variant="diagonal" />Fade
fade applies a radial mask-image, so the pattern fades out toward the edges of its container instead of cutting off sharply.
<BackgroundPattern variant="dot-grid" fade />Accessibility
- Renders
aria-hidden="true"— the pattern carries no content, so it is hidden from assistive tech by default. - Static by construction (CSS gradients only, no animation) — no
prefers-reduced-motionhandling is needed.
API
| Prop | Type | Default |
|---|---|---|
variant | 'dot-grid' | 'line-grid' | 'diagonal' | 'dot-grid' |
fade | boolean | false |
Plus all standard HTML attributes for the rendered <div>.
Related
MediaBand
Stacking-context band with a decorative graphic behind content — clipped positioned parent, z-ordered layers, and an optional seam fade into the neighbouring sections.
BrikBlocks
Decorative square-motif primitive — the "brik" mark from the /about redesign. A run of 24×24px squares, 8px gap, tinted light/dark/poppy in order.