CSS CSS Variables Generator

Home/Tools/CSS Variables Generator

Create and organize CSS custom properties for your design system.

No sign-up neededRuns in your browserProduction-ready CSS

CSS Variables

Name

Type

Value

Name

Type

Value

Name

Type

Value

Name

Type

Value

Name

Type

Value

Name

Type

Value

Name

Type

Value

Preview

Colors

primary

secondary

accent

Sizes

spacing-sm

0.5rem

spacing-md

1rem

spacing-lg

1.5rem

radius

0.5rem

Generated CSS

:root {
  --primary: #6366f1;
  --secondary: #8b5cf6;
  --accent: #ec4899;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --radius: 0.5rem;
}

/* Usage */
.element {
  color: var(--primary);
  padding: var(--spacing-md);
  border-radius: var(--radius);
}

Related Tools

Media Query Generator

Generate responsive media queries for all device sizes.

Z-Index Visualizer

Visualize and manage z-index stacking contexts.

Container Query Generator

Create container queries for component-based responsive design.