CSS Variables Generator — Design Token Builder

Generate CSS custom properties for design systems. Build color palettes, typography scales, spacing, and more. Preview live and copy :root variables.

May 16, 2025 · 1 min · 135 words · Productivity Works Editorial | Translations:

Ja

CSS Variables Generator

CSS Variables Generator

Build design tokens as CSS custom properties — color, typography, spacing, radius, shadows.

Presets:

🎨 Colors

Primary

Secondary

Accent

Background

Surface

Text

Text Muted

Border

T Typography

Font Family

Base Size

Size SM

Size LG

Size XL

Size 2XL

Weight Normal

Weight Bold

Line Height

Leading Tight

↔ Spacing

XS

SM

MD

LG

XL

2XL

3XL

⭘ Border Radius

SM

MD

LG

XL

Full (pill)

☉ Shadows

SM

MD

LG

XL

Live Preview

Generated CSS

Related Tools

Box Shadow Generator Css Animation Generator Css Button Generator