CSS variable dependency analyzer

Build a static dependency graph for CSS custom properties, find undeclared references and identify possible cycles before debugging the cascade.

01 Input

YOUR INPUT

02 Output

LOCAL RESULT

QUICK GUIDE / 36

How to use

Select Load example to restore the sample, or replace the labeled inputs with your own values.
Review the options and select Run tool. No input is sent to a server.
An undeclared reference may still work through its fallback or an external stylesheet. The graph combines definitions across selectors and conditional rules.
Inspect the result, then copy or download it. Clear removes visible inputs and output.

A worked example

Load example restores these values.

CSS stylesheet:
:root { --base: #5546e5; --accent: var(--base); --loop: var(--loop); }
.card { color: var(--accent); background: var(--missing, white); }

Expected result

Declared: --base, --accent, --loop
Undeclared: --missing
Possible cycle: --loop → --loop

Scope & limitations

Static analysis, not computed styles: selector scope, inheritance, registration and media conditions are not resolved. A reported cycle is possible, not proof it occurs on an element. ASCII custom-property names only; malformed var() calls are rejected.

Preparing offline tools…Everything runs on your device.

CSS variable dependency analyzer

01 Input

02 Output

Related tools

Fluid CSS clamp builder

CSS easing curve editor

CSS Grid layout builder