Background Color
The fill colour behind an element's content, creating surface layers and visual depth.
Plain English
Background colour is the foundation of surface layering — the technique of using progressively lighter or darker shades to show that some elements sit "on top of" others. Pure white pages with white cards look flat. A slightly off-white page (#F9FAFB) with true-white cards (#FFFFFF) creates immediate depth without shadows. The smallest background colour difference — just 2–3% lightness — is enough to establish hierarchy.
Technical
Set with background-color (solid) or background (shorthand, also accepts gradients and images). Background extends through the padding but stops at the border edge (box-sizing does not affect background). background-color: transparent is the default for most elements. Use CSS custom properties for background tokens so dark mode is a token swap: --color-bg: #ffffff; --color-surface: #f9fafb.
Live Demo
Default surface
Standard card for most content sections.
Highlighted / info
Used for tips, notices, or informational callouts.
Emphasis / hero
Dark backgrounds for hero sections and CTAs.
Secondary / sidebar
Subtle background for supporting areas.
Background color communicates section purpose before the user reads a word.
Usage
✓ Good usage
Set the page to #F9FAFB and cards to #FFFFFF — the 3% lightness difference creates clear surface layering without needing borders or shadows.
✗ Bad usage
Using pure white (#FFFFFF) for both the page background and all cards — they merge into one flat surface and depth is lost.
Recommended values
- Page background: #F9FAFB (very light grey) or #FFFFFF
- Card/surface: #FFFFFF on grey background, or #F8FAFC on white background
- Hover: 3–5% darker or a low-opacity tint of the accent
- Active/selected row: low-opacity accent tint (e.g. #EFF6FF)
- Code block: #F1F5F9 (cool light grey)
- Disabled: #F3F4F6 (slightly greyed)
Common mistakes
- Same background colour for page and surface — no depth.
- Too strong a background on hover states — should be subtle, not jarring.
- Using raw hex values for backgrounds instead of tokens — dark mode requires a token swap.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Page background: #F9FAFB. Card/panel surface: #FFFFFF. Hover state background: #F1F5F9. Selected/active row: #EFF6FF. All backgrounds as CSS custom properties for easy dark mode switching.