CSS Custom Properties Generator
Generate CSS custom properties (variables) for design systems. Create color palettes, spacing scales, typography systems. Export as CSS or JSON.
Loading tool...
What is CSS Custom Properties Generator?
CSS Custom Properties Generator creates organized CSS variables for design systems. Generate color palettes, spacing scales, typography systems, and export as CSS or JSON.
Key Benefits
- Design system builder
- Token generation
- Multiple export formats
- Consistent naming
Common Use Cases
- •Design systems
- •Component libraries
- •Theme creation
- •Brand guidelines
How to Generate CSS Custom Properties
- Choose Category: Select what to generate: Color palette, Spacing scale, Typography, or a complete design system.
- Define Color Palette: Enter your brand colors. The tool generates shades (lighter/darker) and semantic names like primary, secondary, success, danger.
- Set Spacing Scale: Choose a base unit (4px or 8px) and generate a consistent spacing scale (xs, sm, md, lg, xl).
- Configure Typography: Set base font size, scale ratio, and generate font sizes, line heights, and letter spacing values.
- Add Custom Variables: Add custom CSS variables for borders, shadows, z-index, transitions, or any other repeated values.
- Export Variables: Copy the generated CSS custom properties for your :root selector, or download as a separate CSS file. Export as JSON for use in JavaScript.
Key Features
- Color System: Generate complete color palettes with shades, tints, and semantic color names.
- Spacing Scale: Create consistent spacing systems based on 4px or 8px grids (xs, sm, md, lg, xl, 2xl).
- Typography Scale: Generate modular type scales with font sizes, line heights, and letter spacing.
- Shadow System: Pre-defined box-shadow values for elevation and depth.
- Dark Mode Support: Generate both light and dark theme variable sets.
- Multiple Export Formats: Export as CSS custom properties, SCSS variables, JSON, or JavaScript objects.
- Theme Preview: Live preview of your design system with sample components.
Frequently Asked Questions
What are CSS custom properties (variables)?
CSS custom properties (--variable-name) are reusable values defined once and used throughout your stylesheet. They enable consistent design systems and easy theming.
How do I use the generated variables?
Copy the generated CSS, paste it in your :root selector, and reference variables like var(--primary-color) anywhere in your styles.
Can I create dark mode themes?
Yes! Generate two sets of variable values (light and dark themes), then toggle them using CSS media queries or JavaScript class changes.
What gets generated besides colors?
The tool generates complete design tokens: color palettes, spacing scales (4px, 8px, 16px), typography scales (font sizes, line heights), border radii, shadows, and more.