What counts as a custom property?

Any CSS declaration whose property name starts with two hyphens (--), as defined in the CSS Custom Properties specification. For example: --color-primary: #0A2540; is a custom property declaration.

Does this tool run server-side?

No. All parsing happens in your browser using JavaScript. Your CSS is never sent to any server.

Why might the same property appear more than once?

The same custom property can be declared in multiple selectors (e.g., :root and a media query override). Each declaration is listed separately with its selector so you see the full picture.

Can I inspect minified CSS?

Yes. The parser handles both minified and formatted CSS. It splits on semicolons and braces rather than relying on line breaks.

What does the CSV export contain?

The exported CSV includes three columns: Property (the --name), Value, and Selector. It reflects any active search filter, so you can export a subset of properties.

CSS Custom Property Inspector

Paste a CSS stylesheet and get a sorted, searchable list of every --custom-property declaration with its value and selector.

CSS Input

Results

Paste CSS and click Inspect

Property	Value	Selector

Copied!

Summary

The CSS Custom Property Inspector parses any CSS stylesheet you paste and extracts every --custom-property (CSS variable) declaration. Results are sorted alphabetically and show the property name, its value, and the selector it was declared in. Use the search box to filter by name or value.

How it works

Paste your full CSS stylesheet into the input panel.
Click "Inspect" (or press Ctrl+Enter) to parse the stylesheet.
The tool scans every declaration block for properties starting with "--".
Results appear in a searchable table — pre-sorted alphabetically by property name.
Use the search box to filter by property name or value.
Copy any value with one click, or export the full list as a CSV.

Use cases

Audit a design system to find all color, spacing, and typography tokens.
Debug theming issues by quickly seeing what custom properties are defined.
Document a third-party library's CSS variables for customization.
Detect duplicate or conflicting custom property definitions.
Extract a design token inventory before migrating to a new system.
Compare two stylesheets by inspecting each and diffing the exports.

Frequently Asked Questions

Last updated: 2026-05-23 · Reviewed by Nham Vu