🏷️

Build a Complete CSS Custom Properties System

Generate a full CSS custom properties (CSS variables) system from two base colors. Includes auto-generated color scales, spacing tokens, typography scale, border radius, and shadow tokens.

Open CSS Variables Generator →

Features

Auto-generated 10-shade color scales
Spacing token system from base unit
Typography scale with 8 sizes
Border radius token set
Shadow token collection

Output Formats

CSSStandard properties

SCSSVariables & nesting

TailwindUtility classes

Common Use Cases

Perfect for design systems, component libraries, theming, dark mode, white-labeling.

More CSS Tools

Start Designing

25 CSS generators. 10 free, 15 Pro. Instant code.

Open CSS Variables Generator →