CSS

CSS Media Query Generator

Build a @media query from multiple ANDed conditions (width, height, orientation, colour scheme, reduced motion, hover/pointer capability, aspect ratio) with a live "does your browser match right now?" indicator. Presets, and export to CSS, SCSS or Tailwind.

What this tool does

Builds a @media query from any combination of conditions ANDed together, wrapping a block of CSS you supply — with a live indicator that checks, using the browser's own window.matchMedia(), whether the query actually matches right now, updating as the window is resized.

Eight condition types

Min/max width, min/max height, orientation, preferred colour scheme (light/dark), preferred reduced motion, hover capability, pointer type (fine/coarse/none), and aspect ratio — the full set used for responsive layout and accessibility-aware media queries, not just the width breakpoints most generators stop at.

Multiple ANDed conditions

Any number of conditions can be combined — a query for "landscape AND under 900px" or "coarse pointer AND no hover" (a reasonable touch-device detector) needs more than one condition at once, and each can be added or removed independently.

A real, live match check

Rather than only generating the query text, the tool actually evaluates it against the current browser using matchMedia() and shows a live match/no-match indicator that updates on window resize — confirming the query behaves as expected before it ships.

Presets and the CSS to wrap

Eight presets — Mobile Only, Tablet, Desktop Up, Wide Screens, Dark Mode, Landscape Mobile, Reduced Motion, and Touch Devices — cover common breakpoint and capability queries. The CSS block the query wraps is directly editable, so the exported code is a complete, ready-to-use rule.

Getting it out

Export as plain CSS, SCSS, or a Tailwind config note for adding the query as a custom screen, copyable with one click.

Privacy

Everything, including the live match check, runs locally in your browser -- nothing is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?

No. The query is built and checked against your own browser entirely locally -- nothing is sent to a server.

How does the live match indicator actually work?

It calls the browser's own window.matchMedia() with the exact query being built and reads its real matches result, updating on window resize -- not a simulated or approximated check.

Can I combine multiple conditions in one query?

Yes -- any number of conditions are ANDed together, needed for things like "coarse pointer and no hover" as a touch-device check, or "landscape and under 900px" for landscape phones specifically.

What condition types beyond width are supported?

Min/max height, orientation, preferred colour scheme, preferred reduced motion, hover capability, pointer type, and aspect ratio -- covering accessibility-aware and capability-based queries, not just width breakpoints.

Can I edit the CSS the media query wraps?

Yes -- the CSS block is directly editable, so the exported code is a complete, ready-to-paste rule rather than just the bare @media condition.

What export formats are available?

Plain CSS, SCSS, or a Tailwind config note for adding the query as a custom screen in tailwind.config.js -- selectable from a dropdown next to the code output.