CSS Vault

Extract CSS custom properties from any webpage. Search, copy and export design tokens as JSON or CSS. Built for design engineers.

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.