CSS Media Query Generator
Build media queries without looking up syntax. Choose a width range, orientation, colour scheme, motion and contrast preferences, input type or print, and get the @media rule with your selector and declarations, written in the classic or the newer range syntax, plus the JavaScript to react to the same query with matchMedia.
- Runs in your browser
- No sign-up
- Free to use
How to use CSS Media Query Generator
- Choose a width condition and the widths.
- Add media type, orientation and user preferences.
- Enter the selector and declarations.
- Copy the CSS or the matchMedia snippet.
CSS Media Query Generator features
Width ranges
At least, below or between, without overlapping ranges.
Two syntaxes
Classic min-width/max-width or modern width >= 768px.
Preferences
Dark mode, reduced motion and more contrast.
Input type
Hover-capable mouse or coarse touch pointer.
px or em
em breakpoints follow the user’s text size.
JavaScript
matchMedia with a change listener.
When to use CSS Media Query Generator
- Mobile-first layouts with min-width breakpoints.
- Dark mode styles with prefers-color-scheme.
- Turning off animation for people who prefer reduced motion.
- Hover effects only on devices that can hover.
CSS Media Query Generator FAQ
Should I use min-width or max-width?
Mobile-first CSS writes phone styles without a query and adds min-width queries for larger screens. It usually produces less CSS than desktop-first max-width overrides.
Why 1023.98px instead of 1024px?
In classic syntax max-width includes the value. Stopping 0.02px short means a range never overlaps the next min-width range, even at fractional zoom levels. Range syntax uses < instead.
Can I use the range syntax?
Yes in browsers from 2023 onwards: Chrome and Edge 104, Firefox 63 and Safari 16.4. Use classic syntax if you support older browsers.
Why em for breakpoints?
In media queries 1em is the browser’s default font size. If a user sets larger text, em breakpoints switch to the narrow layout sooner, before content overflows.
How do I detect a mouse?
(hover: hover) and (pointer: fine) match devices whose primary input can hover precisely. Do not hide important content behind hover.
Is anything uploaded?
No. The code is generated in your browser.
Media queries in modern CSS
Media queries apply CSS only when conditions about the device or the user’s settings are true. Width conditions are the best known, but queries can also test orientation, pointer precision, hover ability, screen density, print output and preferences the user set in the operating system.
Width queries come in two syntaxes. The classic form uses min-width and max-width, where both values are inclusive. The range syntax, available in all current browsers since 2023, uses comparison operators such as width >= 768px and can express a range in one expression. The generator writes either and avoids the classic overlap problem by ending max-width ranges at .98.
User preference queries make sites more inclusive. prefers-color-scheme lets you offer a dark theme that follows the system setting, prefers-reduced-motion lets you calm animations for people who get dizzy or distracted by movement, and prefers-contrast signals that the user wants stronger contrast.
Interaction queries describe the input device. hover and pointer distinguish mouse and trackpad users from touch screens, which is useful for showing hover effects only where they work and making touch targets larger where fingers are used.
The same conditions are available in JavaScript through window.matchMedia. The generated snippet runs your code once and again whenever the query starts or stops matching, which is more efficient than listening to every resize event.