CSS Container Query Generator
Generate container queries with the container-type and container-name declarations, breakpoints in container query units, and the fallback structure for browsers that need one.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Media queries ask the wrong question
A media query asks how wide the viewport is. A component almost never cares: a card in a narrow sidebar needs its compact layout whether the window is 400 pixels or 4000. For years this was worked around by passing modifier classes down from whatever knew the context, which coupled every component to every place it was used and broke the moment a component moved. Container queries let the component ask about the space it has been given, which is the question it actually needs answered.
The container has to be declared
An element only becomes queryable when it declares container-type, and the query then applies to the nearest ancestor that did. Setting container-type to inline-size introduces size containment on that axis, which means the element's own contents can no longer influence its width. That is usually what you want and it does change layout in ways worth checking, particularly for elements that were previously sizing to their content.
Container query units are the other half
The cqw, cqh, cqi and cqb units resolve against the query container rather than the viewport, so a heading at 8cqi is eight percent of its container's inline size wherever that component appears. Combined with clamp this produces type and spacing that scale with the component rather than with the window, which is what genuinely portable components need and what viewport units could never provide.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What is the difference from a media query?
A media query asks about the viewport; a container query asks about the space the component was given. A card in a narrow sidebar needs its compact layout regardless of how wide the window is, and only a container query can express that.
Why does my container query not work?
Almost always because no ancestor declares container-type. The query applies to the nearest ancestor that does, and an element cannot query itself, so the container must be a wrapper around the element being styled.
What does container-type: inline-size do?
It makes the element a query container and applies size containment on the inline axis, meaning its contents can no longer influence its width. That is usually the intent and it does change layout for elements that previously sized to their content.
What are cqi and cqw units?
Percentages of the query container rather than the viewport. 1cqi is one percent of the container inline size, so type set in cqi scales with the component wherever it is placed, which viewport units could never do.
Do I still need media queries?
Yes, for things that genuinely are viewport-level: overall page layout, print styles, and preferences such as reduced motion or colour scheme. Container queries replace media queries for components, not for the page.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Define your component breakpoints to generate the container query CSS.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.