π― Scope Settings
π Scoped Rules
π Generated CSS Code
ποΈ Live Preview
Title Inside Scope
This text is inside the scope and will have @scope styles applied.
Title Outside Scope
This text is outside the scope and will not have @scope styles applied.
π What is CSS @scope?
CSS @scope is a new CSS feature that allows you to limit style rules to a specific DOM subtree. Unlike Shadow DOM, @scope doesn't require creating a separate DOM tree - it's a pure CSS solution.
Syntax
@scope (<scope-root>) [to (<scope-limit>)] { rules }
Key Concepts
Scope Root - The root element where styles apply. Only descendants of this element will match the rules.
Scope Limit - Optional boundary. Styles won't apply to the limit element and its descendants.
Donut Scope - A @scope with a limit creates a "donut" scope, with a hole in the middle.
Browser Support
β Chrome 118+ | β Edge 118+ | β Safari 17.4+ | π Firefox (in development)
β FAQ
Is CSS @scope Generator free?
Yes, completely free. No registration required.
What is CSS @scope?
CSS @scope is a new CSS feature that limits style rules to a specific DOM subtree, preventing style leakage.
How is @scope different from Shadow DOM?
@scope is a pure CSS solution. Shadow DOM provides stronger encapsulation but requires more setup.
What is browser support?
Chrome 118+, Edge 118+, Safari 17.4+ support it. Firefox is implementing it.
Does it upload data?
No. Everything runs locally: Scope Root Selector and Scope Limit are processed on your device, never sent to a server.