CSS Vault

About

CSS Vault is a developer and design engineer's power tool. Instantly extract every CSS custom property (--variable) from any webpage, inspect its type and resolved value, and export the full token set for use in your own projects.

Key Features:

{ } Deep CSS Variable Extraction
Scans all stylesheets — including @media and @supports blocks, inline styles, and :root declarations — to find every --custom-property on the page. Resolves computed values so you see the actual rendered color or size, not just a reference.

🏷 Smart Type Classification
Variables are automatically categorized into 12 types: Color, Spacing, Size, Typography, Radius, Shadow, Animation, Gradient, Opacity, Z-Index, Number, and Other. Each type is color-coded for instant visual scanning.

🔍 Live Search & Filter
Search across variable names and values in real time. Filter down to a single type with one click. Build focused exports containing only the tokens you need.

📋 Three Copy Modes Per Variable
Click any row to copy var(--name) for direct use in CSS. Or use dedicated buttons to copy just the name, just the resolved value, or the full var() reference.

↓ Export as CSS or JSON
Export all visible variables as a :root { } CSS block or as a structured JSON object — ready to paste into your design system, Figma tokens plugin, or codebase. One click, entire token set.

💾 Save & Revisit Vaults
Save any page's token set for offline reference. Right-click any page and choose "Save CSS Variables." Click any saved type chip to instantly load and filter that vault.

🔒 Fully Local
No data leaves your device. No account required.