Contact

Tools  /  CSS  /  CSS Container Query Generator

CSS

CSS Container Query Generator

Wrap CSS in a @container query, plus the container-type/container-name it needs on the parent -- with a REAL live-resizable preview box (drag its corner handle) so you can watch the browser's own container-query engine apply your styles as it crosses the threshold, no simulation needed. Multi-condition support, presets, and export to CSS, SCSS or React.

More CSS tools

CSS Button Generator CSS Card Generator CSS Tooltip Generator CSS Toggle / Switch Generator CSS Spinner / Loader Generator CSS Skeleton Loader Generator

What this tool does

Builds a @container query — CSS's element-based alternative to viewport-based media queries, where a component restyles based on the size of its own container rather than the whole browser window — along with the container-type/container-name declaration the parent element needs for the query to work at all.

A real resize, not a simulation

The preview box has an actual drag handle (CSS resize: both) — dragging it resizes a real container element, and the browser's own container-query engine restyles the content inside it live as it crosses the configured threshold. This is the genuine CSS feature at work, not a JavaScript approximation of what it would do, with a ResizeObserver readout showing the exact container dimensions as you drag.

Container type and multiple conditions

Container type can be inline-size (width only, the common case), size (width and height, needed for height-based conditions), or normal. Any number of conditions — min/max width, min/max height, aspect ratio, or orientation — can be ANDed together, matching how real @container queries are written.

Presets and the CSS to apply

Five presets — Card Layout, Sidebar Collapse, Compact Header, Wide Grid, and Tall Container — cover common component-resize patterns. The CSS the query applies is directly editable, so the exported rule is complete and ready to use.

Getting it out

Export as plain CSS, SCSS, or a React-oriented note (since @container can't be expressed as an inline style object and needs a real stylesheet), copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?
No. The query is built and demonstrated entirely in the browser -- nothing is sent to a server.
Is the preview a real container query, or a simulated one?
It's real -- the preview box has an actual resizable container element, and the browser's own container-query engine restyles the content inside it as you drag, not a JavaScript approximation.
What's the difference between container queries and media queries?
A media query responds to the browser viewport's size; a container query responds to the size of a specific element on the page, so the same component can restyle correctly whether it's in a wide main column or a narrow sidebar.
What does container-type: size do differently from inline-size?
inline-size only tracks the width, the common case for width-based conditions. size tracks both width and height, which is required if the container query needs to condition on min-height, max-height, or aspect-ratio.
Can I combine multiple conditions in one container query?
Yes -- min/max width, min/max height, aspect ratio, and orientation can all be ANDed together in a single @container rule.
Why does the React export just show a note instead of a style object?
@container is a real CSS at-rule and can't be expressed as an inline React style object -- the export explains this and supplies the CSS to add to an actual stylesheet, with container-type/container-name applied via a class or inline style on the wrapper.
Theme Accent