CSS Media Query Generator
Build combined viewport, orientation, color-scheme and reduced-motion queries with a live match indicator.
Set your values
Adjust the values, then calculate your result.
How to use CSS Media Query Generator
- Load the example or paste your own input.
- Check the settings and run the tool.
- Review the result, then copy or download it.
What this tool helps you do
Assemble a CSS media condition without repeatedly typing its syntax. Choose viewport width bounds and optional device preference conditions. The tool combines the selected conditions with and and returns a stylesheet scaffold ready for your own rules. A live indicator checks the generated query against the current browser, updating when the viewport or relevant preference changes.
Format rules and limitations
Width conditions refer to CSS pixels, not physical screen pixels or an element’s container size. Zero disables a width bound, and an enabled maximum cannot be below the minimum. Matching a query does not guarantee a suitable layout; test the styles you add on real content. This generator does not modify the page stylesheet. Browser support for individual media features can differ, so review the target environment before deployment.
What should I check before relying on the output?
Width conditions refer to CSS pixels, not physical screen pixels or an element’s container size.
Is input uploaded?
Processing takes place in your browser. This tool does not send your input or selected files to a conversion API.