CSS Variables Generator

Build and manage CSS custom properties / design tokens with live preview and export.

Variables

Scope:

Name

Type

Value

Description

Name

Type

Value

Description

Name

Type

Value

Description

Name

Type

Value

Description

Name

Type

Value

Description

Token Preview

--color-primary

#3b82f6

--color-secondary

#8b5cf6

--spacing-base

16px

--border-radius

8px

Generated Code

:root {
  --color-primary: #3b82f6;  /* Primary brand color */
  --color-secondary: #8b5cf6;  /* Secondary accent */
  --spacing-base: 16px;  /* Base spacing unit */
  --border-radius: 8px;  /* Default border radius */
  --font-family: 'Inter', sans-serif;  /* Primary typeface */
}

/* Color usage */
.element { background-color: var(--color-primary); color: var(--color-primary); border-color: var(--color-primary); }

/* Color usage */
.element { background-color: var(--color-secondary); color: var(--color-secondary); border-color: var(--color-secondary); }

.element { margin: var(--spacing-base); padding: var(--spacing-base); }