CSS Media Query Extractor
List the media queries a stylesheet contains, so you can see its real breakpoints.
Your result will appear here as soon as you add some input.
How to use it
- 1Paste your input into the input box, or type it directly.
- 2Adjust the options if you need something other than the defaults.
- 3The result updates as you type.
- 4Copy the result to your clipboard or download it as a file.
About the CSS Media Query Extractor
Breakpoints accumulate. A stylesheet that was designed around three sizes often ends up with eleven, half of them one pixel apart, which is exactly the sort of thing that only becomes visible in a list like this.
Queries for `prefers-reduced-motion`, `prefers-color-scheme` and `print` show up here too - and their absence is often the more interesting finding.
Questions people ask
Is your code uploaded to a server?
No. This tool runs entirely in your browser using standard web APIs, so your code never leaves your device. You can confirm it by opening your browser's network panel while the tool runs, or by disconnecting from the internet after the page has loaded.
Is it free, and do I need an account?
Yes, it is free, and there is no account, no sign-up and no watermark on the result. The project is funded by optional donations.