CSS Media Query Generator
Guide
CSS Media Query Generator
Build precise CSS @media rules for any breakpoint and feature combination without memorizing syntax. Pick a framework preset, choose the query type, and toggle the extra media features you need — the tool stitches together a valid block with both classic and modern range syntax.
How to Use
- Pick a Framework Preset — Bootstrap 5, Tailwind CSS, Material Design, or Custom — then choose the breakpoint width.
- Choose the Query Type: min-width (mobile-first), max-width (desktop-first), or a range between two widths.
- Select the Syntax Style: classic
min-width/max-widthor the new Media Queries Level 4 range syntax (width >= ...). - Toggle any Additional Features you want combined with the breakpoint: orientation, prefers-color-scheme, prefers-reduced-motion, hover, or pointer.
- Copy the generated
@mediablock from the output panel and drop it into your stylesheet.
Features
- Framework presets – One-click breakpoints for Bootstrap 5, Tailwind CSS, and Material Design, plus a custom mode for any pixel value.
- Three query modes – Generate mobile-first
min-width, desktop-firstmax-width, or a precise range query that targets a single device class. - Classic and modern syntax – Toggle between traditional
min-width/max-widthrules and the cleaner Media Queries Level 4 range syntax (width >= X). - Combined media features – Layer orientation, prefers-color-scheme, prefers-reduced-motion, hover capability, and pointer accuracy on top of any width query.
- Live updates – Output regenerates as you change inputs, so you can preview different combinations instantly.
- Copy & download – Grab the CSS with one click or save it as a
.cssfile for your project.
FAQ
-
What is a CSS media query?
A media query is a CSS feature that applies styles only when the browsing environment matches certain conditions, such as viewport width, screen orientation, or user preferences. It is the core mechanism behind responsive design, letting a single stylesheet adapt to phones, tablets, desktops, and beyond.
-
What is the difference between min-width and max-width?
min-width applies styles when the viewport is at least that wide, which is the foundation of mobile-first CSS — you start with small-screen styles and layer on rules as the viewport grows. max-width applies styles when the viewport is at most that wide, which is the desktop-first approach where you progressively scale styles down for smaller devices.
-
What is the new range syntax in Media Queries Level 4?
Media Queries Level 4 introduces comparison operators like (width >= 768px) and (400px <= width <= 1200px) as a cleaner alternative to min-width and max-width pairs. It improves readability for ranges and is supported in all modern browsers, though older browsers still require the classic syntax.
-
What does prefers-color-scheme do?
prefers-color-scheme detects whether the user has chosen a light or dark theme at the operating-system level. Pairing it with media queries lets you serve a dark-mode color palette automatically, without requiring an in-page toggle.
-
Why combine multiple media features in one query?
Combining features with the and keyword lets a single rule target a precise context, for example a wide viewport in dark mode that also supports hover. This keeps stylesheets compact and avoids stacking redundant rules that have to be kept in sync manually.
Install Our Extensions
Add IO tools to your favorite browser for instant access and faster searching
恵 Scoreboard Has Arrived!
Scoreboard is a fun way to keep track of your games, all data is stored in your browser. More features are coming soon!
Must-Try Tools
View All New Arrivals
View AllUpdate: Our latest tool was added on Jun 19, 2026
Get Involved
Help us continue providing valuable free tools
