Container Style Queries - Free Online Tool | IconVault
Learn @container style() queries hands-on: theme and feature flags via custom properties with a live demo. Free, runs in your browser.
Container Style Queries
Theme and feature-flag components with @container style()
Theme flag --theme
Density flag --density
Feature flag --beta
5 of 5 free copies left.
This browser does not report container-type support, so the live demo may not react. The CSS pattern itself is still valid for modern browsers.
Live demo - the card below is styled by @container style() queries
Pricing card
BETATheme, density and the beta badge are all driven by custom properties queried in CSS.
--theme: light; --density: comfortable; --beta: off;
The CSS behind it
/* the container: any container-type works for style queries */
.card-scope {
container-type: inline-size;
--theme: light;
--density: comfortable;
--beta: off;
}
/* query custom property values, no JavaScript */
@container style(--theme: dark) {
.card { background: #0f172a; color: #f1f5f9; }
}
@container style(--theme: accent) {
.card { background: linear-gradient(135deg, #0d9488, #059669); color: #fff; }
}
@container style(--density: compact) {
.card { padding: 0.75rem; font-size: 0.8rem; }
}
@container style(--beta: on) {
.beta-badge { display: inline-flex; }
}About this tool
IconVault's Container Style Queries playground teaches @container style() queries by doing. Flip theme, density and feature-flag custom properties on a container and watch a card restyle itself in pure CSS, with zero JavaScript involved in the styling. The full CSS is shown and copyable. It is free and runs fully in your browser.
Style queries are the missing half of container queries: while size queries respond to width, style queries respond to custom property values, which makes them perfect for theming, density modes and feature flags scoped to a component subtree. Instead of toggling classes with JavaScript, you set --theme: dark on a container and every descendant styled with @container style(--theme: dark) updates automatically.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon