CSS Variable Extractor
Extract all CSS custom properties from any website. Get --color, --spacing, --font variables organized by category.
Sample Extraction
CSS Variables Extracted: vercel.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━
Total Variables: 47
Colors (18):
├─ --color-background: #000
├─ --color-foreground: #fff
├─ --color-primary: #0070f3
├─ --color-success: #0070f3
├─ --color-error: #ee0000
└─ --color-warning: #f5a623
Spacing (12):
├─ --space-1: 4px
├─ --space-2: 8px
├─ --space-4: 16px
└─ --space-8: 32px
Typography (8):
├─ --font-sans: Inter, system-ui
├─ --font-mono: Menlo, monospace
├─ --font-size-sm: 14px
└─ --font-size-lg: 18pxVariables by Category
Colors
Brand, semantic, neutral
Spacing
Padding, margin, gap
Typography
Fonts, sizes, weights
Effects
Shadows, radius, z-index
Why Extract CSS Variables?
Understand existing design systems
Enable dark mode with variable swapping
Migrate legacy CSS to modern tokens
Learn from top websites' architecture
Related Tools
Extract CSS Variables Now
Get all custom properties from any website, organized and ready to use.
Get Started