VoriTools

CSS Variable Inspector & Fallback Checker

Paste a stylesheet to inspect its variable references as text. Findings do not resolve selector scopes, inheritance or the browser’s cascade.

Runs locally in your browser
View category: Frontend & Design (34)
This tool processes all data locally in your browser.
CSS sourceDefinitions and references are analyzed as text; no stylesheet is applied to this page.

How to check custom property definitions and var() references in a stylesheet

Paste a stylesheet and the page reads it as text: it lists the custom properties that are defined, the ones that are referenced through var(), and the gaps between the two - a reference with no definition and no usable fallback, or a definition that nothing in the paste uses.

Comments and quoted strings are skipped, so a commented-out rule or a "var(--x)" inside content is not counted as real usage, and the last declaration of a block is read even when the semicolon is missing.

  1. Paste CSS into the box on the left, or press Load example for a stylesheet that contains an undefined token, an unused token and one fallback.
  2. Press Inspect variables. The custom property map fills with one card per token, and the report pane lists each token with its values and its number of usages.
  3. Read the findings: an undefined reference needs a definition or a fallback, an unused definition may be a leftover, and a token defined twice may be an intentional override.
  4. Press Copy to take the report, or Download to save it as css-variables-report.txt.
  5. Press Clear to empty the input, the map and the report in one step.

What the report counts, which findings it raises, and what a text analysis cannot see

What counts as a definition and as a reference

A custom property is a declaration whose name starts with two dashes, wherever it sits: in :root, in a class or inside a media query. The value runs to the first semicolon or to the closing brace, so the last declaration of a block is read even when the author left the semicolon out, and a value that contains parentheses such as rgb(0, 0, 0) is kept whole.

References are var() calls, and the token name is case-sensitive: --Brand and --brand are two different tokens, exactly as in the browser. The function name is not case-sensitive, so VAR(--x) counts too, and a var() written inside the fallback of another call is listed on its own. A fallback only counts when it has a value: var(--x,) leaves the declaration invalid when --x is missing, so it is reported like a call without one.

Reading the findings and the counts

The metrics count definitions, references and the items that need review; the map shows, per token, how often it is defined, how many var() calls use it and how many of those bring a usable fallback, as a ratio. A token that is defined but never referenced in the paste is flagged as unused, and one declared in two blocks is reported as a possible override - both messages say that the scope of the verdict is the pasted text.

A reference with no definition and no fallback is the one finding that always breaks in the browser, and it is the only one raised as an error. CSS without a single custom property is not reported as a pass either: the page says that nothing was found instead of claiming that every variable is accounted for.

What the text analysis cannot see, and what stays local

The analysis is textual on purpose: it does not resolve selector scopes, inheritance or the cascade, and it does not compute what the browser would use at runtime. A token defined in another stylesheet, injected by JavaScript or shipped by a design system will be reported as undefined here, and unused means unused in this paste, not in the whole project.

Everything runs in the browser; the pasted CSS is never uploaded and nothing is requested for it, and the tool keeps working when the network is down. Copy and Download stay inactive until a report exists, so an empty clipboard or a zero-byte file cannot be mistaken for a result.

Recent tools: