ToolSpark

CSS Variables Generator

Create CSS custom properties for your design system. Define colors, spacing, typography, and shadows, then export as CSS or SCSS.

Share:𝕏fin
:root {--color:--size:16px}

Preview

primary
secondary
success
danger
warning
:root {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-bg: #ffffff;
  --color-text: #1f2937;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Poppins', sans-serif;
  --radius: 0.5rem;
  --shadow: 0 1px 3px rgba(0,0,0,0.1);
}
14 variables defined

Frequently Asked Questions

Related Tools