Backgrounds & Surfaces
Exploring page and component background treatments beyond solid colors: gradients, textures, glassmorphism, and animated backgrounds.
src/tokens/extensions/surfaces.css
Surface Tokens
Tokens for texture overlays, glassmorphism effects, and page backgrounds.
| Token | Default | Description |
|---|---|---|
--surface-texture |
none |
Texture pattern: none | noise | grain | dots | lines |
--surface-texture-opacity |
0.05 |
Texture overlay opacity |
--glass-blur |
0px |
Glassmorphism blur amount |
--glass-opacity |
0.15 |
Glass background opacity |
| Page Background | ||
--page-bg-type |
solid |
Background mode: solid | gradient | image |
--page-bg-color |
var(--color-background) |
Solid background color |
--page-bg-gradient |
none |
CSS gradient value (linear, radial, conic) |
--page-bg-image |
none |
Background image URL |
--page-bg-attachment |
scroll |
scroll | fixed |
--page-bg-size |
cover |
cover | contain | auto |
--page-bg-position |
center |
Background position value |
--page-bg-blend |
normal |
Blend mode for compositing |
Gradient Backgrounds
Various gradient techniques for hero sections, cards, and page backgrounds.
Linear
135deg diagonal blend
Radial
Circle from top-left
Conic
Color wheel effect
Mesh
Multiple radial overlays
Animated
Shifting background position
Layered
Highlight + base gradient
/* Mesh gradient - multiple radial overlays */.mesh-bg { background: radial-gradient(at 40% 20%, hsla(28, 100%, 74%, 1) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0px, transparent 50%), radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 1) 0px, transparent 50%);} /* Animated gradient */.animated-bg { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient-shift 15s ease infinite;}Texture Patterns
Subtle texture overlays that add depth and character to surfaces.
None
Clean, flat surface
Noise
SVG turbulence filter
Dots
Repeating dot pattern
Grid
Diagonal grid lines
Lines
Fine diagonal lines
Grain
Film grain effect
/* Noise texture via SVG data URI */--texture-noise: url("data:image/svg+xml,..."); /* Apply texture overlay */.surface::before { content: ""; position: absolute; inset: 0; background: var(--texture-noise); opacity: var(--surface-texture-opacity); pointer-events: none;}Glassmorphism
Frosted glass effect using backdrop-filter. Adjust the blur amount with the slider.
Glass Card
Semi-transparent with blur backdrop
Frosted
Works best on colorful backgrounds
Layered
Border adds subtle definition
/* Glassmorphism card */.glass-card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(var(--glass-blur, 8px)); -webkit-backdrop-filter: blur(var(--glass-blur, 8px)); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-m);}Animated Gradients
Subtle movement for hero sections and featured content.
Hue Rotate
Filter-based color cycling
Pulse Glow
Breathing radial highlight
Wave
Rotating ellipse overlay
Page Background Tokens
The --page-bg-* token family controls rich body backgrounds. Themes override these tokens to create gradient backgrounds that complement their palette. The default theme uses --page-bg-type: solid with no visual change from the standard var(--color-surface) background.
Content Card
Switch themes to see how --page-bg-gradient creates rich backgrounds beneath content surfaces.
/* Page background tokens (surfaces.css) */--page-bg-type: solid;--page-bg-color: var(--color-background, var(--color-surface));--page-bg-gradient: none;--page-bg-image: none; /* Body consumes these tokens (reset.css) */body { background-color: var(--page-bg-color); background-image: var(--page-bg-gradient, var(--page-bg-image, none)); background-attachment: var(--page-bg-attachment, scroll); background-size: var(--page-bg-size, cover); background-position: var(--page-bg-position, center);} /* Themes override in their :root block */:root[data-theme~="cyber"] { --page-bg-gradient: linear-gradient(135deg, oklch(8% 0.04 280), oklch(10% 0.06 200));}