Media & Container Query Generator
Build breakpoint sets for responsive CSS. Toggle between viewport media queries and component-level container queries.
Desktop-first max-width queries are harder to extend — mobile-first min-width is usually easier to maintain.
Container queries respond to a parent element's size, not the viewport. Baseline browser support since 2023.
Output
Individual queries
Individual @container blocks
About this tool
Media queries scope styles to the viewport. Container queries let components adapt to their parent — useful for cards, sidebars, and reusable widgets.
Mobile-first min-width blocks are easier to extend — each breakpoint adds rules without undoing wider layouts. Desktop-firstmax-width chains get brittle fast. Container mode outputs@container setup plus width queries in pixels. Addon queries forprefers-color-scheme, print, and coarse pointers belong in separate blocks — do not nest them inside width breakpoints unless you mean to combine conditions.
Breakpoint and mode choices are shareable via URL query params.