CSS Variable Generator

Add CSS custom property name/value pairs and generate a ready-to-paste :root block.

Variable name (without --)

Value

Quick colors:

/* Add variables above */

Copied!

CSS custom properties let you define reusable values in :root and reference them anywhere with var(--name). They cascade and can be overridden per component.