g3n-data
Support繁中
← All tools

CSS Revert Layer Playground

Explore six properties across four cascade layers with set, revert-layer and absent declarations and isolated previews.

css-revert-layer-demoLOCAL WORKSPACE

Enabling local controls…

Tool settings

Scenarios

Normal priority: base → theme → components → overrides. Absent means no declaration, not unset.

base
theme
components
overrides

Editing clears the previous result; generate again.

Models normal author declarations with equal selectors only; !important, user styles and unlayered rules are outside this model. Absent omits a declaration; it is not CSS unset.

Processed in local memory; inputs are not transmitted or stored.

Static source date: 2026-10-18

Preview and complete output

Set the controls, then generate.

How to use this tool

Choose a scenario or change each layer/property state, generate and compare active sources with the complete @layer CSS.

When not to use it

Models normal author declarations with equal selectors only; !important, user styles and unlayered rules are outside this model. Absent omits a declaration; it is not CSS unset.