Back to Free Tools
FREE TOOLS
CSS Custom Property Extractor
Inventory CSS custom-property declarations and var() references, preserving repeated definitions, fallbacks and source locations.
CSS
JSON
Browser only
Runs locally in your browser. Your files, pasted content and generated output are not uploaded. Reset clears this tool’s working data.
This tool needs JavaScript. If it does not load, refresh the page and try again.
How to use this tool
- Paste a stylesheet into CSS input.
- Select Extract custom properties.
- Download css-custom-properties.json and review declarations, references and names referenced without a declaration in this input.
- Use the recorded source locations to inspect repeated definitions or nested fallback references.
Examples
:root { --brand: #125588; } a { color: var(--brand); margin: var(--gap, 1rem); } reports both references and flags --gap as undeclared in this input.
Limitations
- Up to 200,000 UTF-16 code units, 5,000 custom-property declarations and 10,000 var() references. Nested fallback records: 10 MiB; total JSON output: 20 MiB.
- This is syntax inspection, without cascade resolution, inheritance, selector matching or computed values. An undeclared-here name may be defined in another stylesheet or inherited context.
- Names remain case-sensitive. Locations use one-based lines and columns and zero-based UTF-16 offsets; comments and strings do not create references.
- Imports and URLs are never fetched. Malformed CSS or unsupported ambiguous var() syntax is rejected.
Related tools
No items found.