CSS @media Query Builder

The CSS @media Query Builder is a free, browser-based tool that helps you construct CSS media queries without memorizing the exact syntax for each media feature. Instead of looking up property names and allowed values, you pick features from a dropdown, type the desired value, and the tool generates a ready-to-use @media rule instantly.

You can combine multiple features with and (all conditions must match) or or (comma-separated queries where any condition triggers the rule). A not toggle lets you negate the entire expression so it applies when the conditions are not met.

Supported media features include min-width, max-width, min-height, max-height, orientation, prefers-color-scheme, prefers-reduced-motion, pointer, hover, display-mode, prefers-contrast, min-resolution, aspect-ratio, and color-gamut. The preset library provides one-click templates for the most common responsive breakpoints, dark/light mode, print stylesheets, and accessibility-related queries.

All processing happens entirely in your browser. No data is sent to any server and no account is required. Click Copy or press Ctrl+Shift+C to copy the generated query to your clipboard.

This tool pairs well with the Viewport Size Reference for checking common device dimensions, the CSS Layout Generator for building responsive layouts, and the Responsive Image Srcset Generator for creating optimized image markup that works alongside media queries.

1. Select a Media Type (screen, print, all, or speech) from the dropdown at the top.
2. Click Add Feature to add a media feature condition. Choose a property such as min-width and enter a value like 768px.
3. Add more features as needed. Use the checkbox next to each feature to enable or disable it without removing it.
4. Choose whether to combine features with and (all must match) or or (comma-separated, any can match).
5. Optionally toggle not to negate the entire media query.
6. Review the generated CSS in the output panel on the right (or below on mobile).
7. Click Copy or press Ctrl+Shift+C to copy the media query to your clipboard. Alternatively, click a Common Preset to load a popular query instantly.