CSS Media Query Generator

Build a CSS @media query without remembering the syntax. Combine min-width and max-width (with Tailwind and Bootstrap breakpoint presets), orientation, prefers-color-scheme, prefers-reduced-motion, hover, and pointer into one valid query, and copy the ready-to-use rule. The query is assembled live as you change options, entirely in your browser.

CSS

How to use the CSS Media Query Generator

Pick a breakpoint preset to fill in a common min-width — Tailwind's and Bootstrap's standard breakpoints are both there — or type your own min and max widths and choose the unit. Add any combination of the other conditions: media type, orientation, colour-scheme preference, reduced-motion preference, and the interaction features hover and pointer. Every condition you set is joined with and into a single valid query, the rule is written out below with your selector, and a plain-English summary tells you when it applies.

Leave a control on its "any" option to omit it — only the conditions you actually choose end up in the query, so you don't get redundant clauses. A min-width of 768px with colour-scheme set to dark produces @media (min-width: 768px) and (prefers-color-scheme: dark); switch the media type to print and the type leads the query. For a min/max range that targets a single band — say tablets only — set both widths. Then copy the result straight into your stylesheet.

How media queries drive responsive CSS

A media query is the mechanism that lets one stylesheet adapt to the device it's rendered on. It wraps a block of CSS in a condition — @media (min-width: 768px) { … } — and the rules inside apply only when that condition is true. The most common condition is viewport width, which is the foundation of responsive design: define a layout, then add queries that adjust it as the screen gets wider or narrower. Whether you design mobile-first (base styles for small screens, min-width queries to enhance upward) or desktop-first (max-width queries to scale down) is a matter of strategy, but the query syntax is the same.

Width is only the beginning. Orientation distinguishes portrait from landscape; prefers-color-scheme lets you honour a user's system-level light or dark choice; and prefers-reduced-motion lets you tone down or remove animation for people who've asked their OS to minimise it — an accessibility win that's easy to add. The interaction media features hover and pointer are subtler but powerful: they describe the input device rather than the screen, so you can give precise hover styles to mouse users (hover: hover and pointer: fine) while providing larger tap targets to touch users (pointer: coarse), instead of guessing from screen size.

Multiple conditions combine with and, and the order of width breakpoints in your stylesheet matters because later rules of equal specificity win. The practical difficulty isn't the concept — it's remembering the exact feature names and value syntax, which are easy to get subtly wrong (min-width not width-min, prefers-color-scheme: dark not color-scheme). Generating the query from labelled controls removes that friction and guarantees the output parses, which is especially handy for the less-used features you reach for only occasionally.

Common use cases

  • Responsive breakpoints. Generate min/max-width queries, with Tailwind or Bootstrap values built in.
  • Dark mode. Add a prefers-color-scheme query to style for a user's system theme.
  • Accessibility. Wrap animations in a prefers-reduced-motion query in one click.
  • Touch vs. mouse. Use hover and pointer features to tailor styles to the input device.

Frequently asked questions

Which breakpoint presets are included?
Tailwind CSS (sm 640, md 768, lg 1024, xl 1280, 2xl 1536) and Bootstrap 5 (sm 576, md 768, lg 992, xl 1200, xxl 1400), all in pixels. Selecting one fills the min-width field, which you can then adjust.

How are multiple conditions combined?
With the and keyword, which requires every condition to be true. Only the controls you change from "any" are included, so you get exactly the conditions you chose and nothing redundant.

What do the hover and pointer features do?
They describe the input device rather than the screen. hover: hover targets devices that can hover (a mouse); pointer: fine targets precise pointers and pointer: coarse targets touch. They let you tailor styles to mouse versus touch instead of inferring it from width.

Should I use min-width or max-width?
min-width suits mobile-first CSS, where base styles target small screens and queries enhance larger ones. max-width suits desktop-first, scaling down for smaller screens. Setting both creates a query that targets a specific width band.

Can I use em or rem for breakpoints?
Yes — switch the unit next to the width field. Width breakpoints in em respond to the user's default font size, which some prefer for accessibility; px is the most common and what the presets use.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: