Backgrounds & Surfaces

Exploring page and component background treatments beyond solid colors: gradients, textures, glassmorphism, and animated backgrounds.

Token Reference: See Themes > Extensions for token documentation. Source: src/tokens/extensions/surfaces.css

Proposed Surface Tokens

New tokens to add texture and depth to surfaces.

Token Values
--surface-texture none | noise | grain | dots | lines
--surface-texture-opacity 0.05 (default)
--bg-gradient linear-gradient(...)
--glass-blur 0 | 8px | 16px

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 Preview

Test different page-level background treatments.

Content Card

This card floats above the page background. Try different backgrounds to see how they affect the overall feel.