CSS Media Query Generator

How to use

1. 1Pick a preset (Tailwind v3, Bootstrap 5, Material UI, prefers-color-scheme dark, prefers-reduced-motion, tablet range, Retina, print stylesheet, coarse pointer, portrait phone) to load a starting point, or skip the presets and edit the default screen min-width 768px query.
2. 2For each query, choose the media type (all, screen, print) and optionally prefix it with not or only.
3. 3Click an Add feature chip to attach min-width, max-width, orientation, aspect-ratio, min-resolution, prefers-color-scheme, prefers-reduced-motion, hover, pointer, display-mode, or any other supported feature. Enter the value, pick the unit (px, em, rem, dppx, dpi, x), and the live match badge updates immediately.
4. 4Use Add query to create a comma-separated OR rule. Each new query gets its own match badge, so you can verify how nested or parallel breakpoints actually behave.
5. 5Edit the CSS body below the queries. Anything valid is accepted; the output indents and wraps the body inside the @media block.
6. 6Click Copy CSS to grab the full rule. Resize the browser to watch the Matches now badges switch on and off as the viewport crosses your breakpoints.

About this tool

CSS Media Query Generator composes standards-compliant @media rules in your browser and shows in real time which ones match your current viewport. Start from a preset (Tailwind v3, Bootstrap 5, Material UI, prefers-color-scheme: dark, prefers-reduced-motion, tablet range, Retina, print stylesheet, coarse pointer, portrait phone) or build a query from scratch. Add any combination of media features supported by Media Queries Level 4 and 5: min-width, max-width, width, min-height, max-height, height, orientation (portrait, landscape), min-aspect-ratio, max-aspect-ratio, min-resolution, max-resolution (dppx, dpi, x), prefers-color-scheme (light, dark, no-preference), prefers-reduced-motion, prefers-contrast (more, less, no-preference, custom), prefers-reduced-data, prefers-reduced-transparency, hover, any-hover, pointer (fine, coarse, none), any-pointer, display-mode for installed PWAs (browser, standalone, minimal-ui, fullscreen, window-controls-overlay), color-gamut (srgb, p3, rec2020), dynamic-range, and forced-colors. Toggle the media type between all, screen, and print, and optionally prefix with not or only. Multiple features inside a single query are joined with and; multiple queries are emitted as a comma-separated list (CSS's native way to OR media rules). Each query is also passed to window.matchMedia against your current browser viewport, so a green Live match badge appears next to every rule that fires right now, including OS-level preferences such as prefers-color-scheme and prefers-reduced-motion. The CSS body editor accepts any valid declarations, the output is indented and copy-ready, and a feature reference card explains mobile-first vs desktop-first ordering, range queries, prefers-* features, and the difference between hover, pointer, and width-based detection. Construction and live matching run entirely on-device.

Free to use. Works in your browser. No signup, no login.