CSS Variables & Custom Properties

Hover over elements to see how CSS custom properties can be used to create dynamic, reusable values.

Hover over the elements below to see CSS variables in action!

Primary Color: Secondary Color: Spacing (px): 20px

Primary Color Button

Secondary Color Button

Themed Card

Gradient Box

Animated Box

Shadow Box

Border Box

Styled Text

Fallback Value

Calculated Value

Inherited Variables

Local Scope Override