← Back to functions

CSS Function

var()

Variables

Inserts the value of a CSS custom property (variable).

Syntax

var(--name, fallback)

Example

color: var(--primary-color, #3dffa0);

Common use cases

  • Theming with design tokens
  • Reusing values across a stylesheet
  • Runtime theming without recompiling CSS

Practical developer insight

Always provide a fallback value when using var() in contexts where the variable might not be defined — especially in component libraries.

Related