var()
The var() function substitutes the value of a CSS custom property, with an optional fallback.
Syntax
var(--name, <fallback>)Examples
:root { --gap: 1rem; }
.grid { gap: var(--gap); }
.card { padding: var(--card-pad, 1.5rem); }
Output
Uses the global --gap token for grid spacing and falls back to 1.5rem when --card-pad is undefined.
Notes
Custom properties cascade and inherit, enabling runtime theming via JS or media queries. The fallback after the comma is used only if the property is not set. Invalid substitutions make the declaration use its inherited/initial value.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 49 |
| firefox | 31 |
| safari | 9.1 |
| edge | 15 |