CSS CSS Variables Variable Fallback Values

Previous Next

CSS Beginner 3 min read

Variable Fallback Values

Fallback Values

The second argument of var() is a fallback used when the variable is undefined.

Example

.el { color: var(--brand, steelblue); font-family: var(--font, var(--sys-font, sans-serif)); }

CSS

Full Editor

Pro Tip

Fallback values make components work even without a theme.

Related Resources

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

Practice what you've learned

More in CSS

CSS Introduction CSS Box Model CSS Flexbox CSS Grid CSS Selectors CSS Colors

CSS Custom Properties

Variable Scoping