CSS Cascade Layer Visualizer
Paste CSS that uses @layer and see the cascade order, the rules in each layer,
and exactly which layer wins for every conflicting property.
- h1 { font-weight:800 }
- .text-red { color:red }
- .mt-4 { margin-top:16px }
- h1 { color:tomato }
- .btn { padding:10px 20px;background:#2563eb;color:white;border:none;border-radius:6px;cursor:pointer }
- h1 { color:navy;font-size:32px }
- p { line-height:1.6;color:#333 }
- * { margin:0;padding:0;box-sizing:border-box }
- body { font-family:system-ui, sans-serif }
| Selector | Property | Defined in | Winning value |
|---|---|---|---|
| h1 | color | base: navycomponents: tomato | tomato from components |
Why Cascade Layers?
- Tame specificity wars without
!important - Order framework styles below your custom code
- Layer resets, themes, components, utilities cleanly
- Make CSS overrides predictable across teams
- Migrate legacy CSS one layer at a time
What It Detects
- Named layers
@layer name {} - Anonymous layers
@layer {} - Layer-order declarations
@layer a, b, c; - Unlayered rules (highest priority)
- Selector + property conflicts across layers
Privacy & Speed
- 100% client-side — nothing is uploaded
- Safe for proprietary stylesheets
- Live preview in a sandboxed iframe
- Instant — no sign-up, no rate limits
- Free and open to use
About the CSS Cascade Layer Visualizer
The CSS Cascade Layer Visualizer takes any CSS that uses the @layer at-rule and shows you the cascade in plain view: the order of every layer,
the rules inside each one, the unlayered styles that sit on top, and a side-by-side conflict table that spells out exactly which
layer wins for every duplicated selector + property pair.
Cascade layers were introduced to solve one of CSS's oldest pain points — invisible specificity battles between resets, frameworks, component libraries, and custom overrides. Layers replace those battles with an explicit, named precedence order. This visualizer helps you see and verify that order before you ship, so you never have to guess why a rule didn't apply.
How to Use the CSS Cascade Layer Visualizer
- Paste your CSS into the CSS with @layer editor on the left, or click an example pill (Reset → Utilities, Framework + Custom, Theme Overrides, With Unlayered, Anonymous Layers).
- Watch the Cascade Stack on the right rebuild itself live. Layers are ordered top-down by precedence — the layer at the top wins, the one at the bottom loses.
- Type or paste sample HTML in the Test HTML box to see the rendered result in the sandboxed Live Preview iframe.
- Scroll to the Conflict Resolution table. Each row is a selector + property defined in more than one place. The winning value is highlighted in green; losing values are struck through.
- Use the Copy buttons to grab the CSS or HTML for sharing, or Clear to start over.
- Reorder your
@layer name1, name2, ...;declaration at the top of your CSS to shift precedence — the visualizer updates instantly.
Common Use Cases
- Debugging frameworks — see why your custom rule isn't beating Tailwind, Bootstrap, or a UI kit, and which layer to drop your override into.
- Migrating legacy CSS — wrap old stylesheets in a
@layer legacyso new code automatically takes precedence without rewrites. - Design systems — verify your tokens, base, components, and utilities cascade in the right order before publishing the package.
- Code reviews — paste a PR's CSS to confirm a refactor doesn't quietly invert layer precedence.
- Teaching — show students or junior devs how the cascade actually works without them having to open DevTools.
- Removing
!important— replace heavy-handed important flags with a high-priority layer and watch overrides resolve cleanly. - Theme switching — model light, dark, and high-contrast themes as layers and confirm the active theme overrides the base.
Frequently Asked Questions
What is a CSS cascade layer?
A cascade layer is a named bucket of CSS rules with explicit precedence. Defined with the @layer at-rule, layers let authors group styles (resets, themes, components, utilities) so that a rule in a higher layer always beats a rule in a lower layer — regardless of selector specificity or source order. Layers were standardized in CSS Cascade Level 5.
Which layer wins when there's a conflict?
Unlayered styles win over any layer. Among layers, the one declared last in the layer order wins. So with @layer reset, base, components, utilities;, a rule in utilities beats the same rule in components, which beats base, which beats reset. Specificity and source order only break ties within the same layer.
Why are unlayered rules treated as the highest priority?
By spec, any rule that is not inside a @layer block is treated as if it were in an implicit, top-priority layer. This makes layers a one-way migration tool: existing CSS stays at the top, and you can gradually move it into named layers below as you refactor.
Does the visualizer support anonymous layers?
Yes. @layer { ... } blocks without a name are treated as separate, unique layers and shown as (anonymous 1), (anonymous 2), etc., in the order they appear. They follow the same first-declared-loses, last-declared-wins precedence as named layers.
Is my CSS sent to a server?
No. Parsing, conflict detection, and the live preview all run entirely in your browser. The preview iframe is sandboxed and your CSS never leaves your device, so it's safe to paste internal design-system or product CSS.
Does the visualizer handle nested layers like @layer base.theme {}?
It detects them as layer names (the dotted notation is preserved as a single name in the stack), but it doesn't currently expand nested sub-layer precedence. For most real-world cases — flat layer ordering — this gives an accurate view of which rule wins. For deeply nested layers, treat the visualizer's output as a strong hint and verify in DevTools.
Why doesn't !important show up in the visualizer?
Important declarations invert the cascade-layer order — in the important origin, lower layers beat higher ones. This visualizer focuses on the normal cascade, which is the case 99% of CSS authors care about. If you find yourself reaching for !important with layers, that's usually a sign you should move the rule into a higher-priority layer instead.
Can browsers actually use this CSS?
Yes. Cascade layers are supported in all modern evergreen browsers (Chrome, Edge, Firefox, Safari) and have been stable since 2022. The CSS you paste here is real, shippable CSS — the visualizer just helps you reason about it more easily.