CSS Variables Generator
Build and export a :root custom-properties color and spacing palette.
Palette
Variable prefix (optional)
Spacing base — 4px
Spacing steps — 6
Live preview
primary
secondary
background
foreground
space-14px
space-28px
space-312px
space-416px
space-520px
space-624px
Generated CSS
:root {
--primary: #ec4899;
--secondary: #1e293b;
--background: #0b1220;
--foreground: #f8fafc;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
}