Question 1

How do I define CSS custom properties?

Accepted Answer

Define custom properties (variables) in a :root selector for global scope: :root { --color-primary: #007bff; --spacing-base: 1rem; }. Access them with var(): color: var(--color-primary). You can also define them on specific elements to scope them to that subtree.

Question 2

How do I set CSS variable fallback values?

Accepted Answer

var() accepts a second parameter as fallback: color: var(--text-color, #333). If --text-color is not defined, #333 is used. Fallbacks can themselves use var(): color: var(--text-color, var(--foreground, #333)).

Question 3

Can CSS custom properties be animated?

Accepted Answer

CSS custom properties can be animated using @property (CSS Houdini) which registers them with a type: @property --hue { syntax: '<angle>'; inherits: false; initial-value: 0deg; }. Then animate them with @keyframes like any property. Without @property registration, custom properties cannot be transitioned.

CSS Custom Properties Generator

Color Preview

Spacing Preview

Related Tools