Builds a complete CSS @media rule from a breakpoint, a query type, and your own selector and declarations. Fast, free, and built for simple browser-based workflows.
The query updates as you change the options above.
728 x 90 In-Content Ad
Media Query Generator is a free online tool that builds a complete CSS @media rule from a breakpoint, a query type, and your own selector and declarations. Pick a preset or set custom widths, and the full nested rule appears ready to copy into your stylesheet.
It is useful when you are setting up responsive breakpoints for the first time and want the min-width, max-width, or range syntax written correctly without checking documentation, or when you need a less common query like prefers-color-scheme, prefers-reduced-motion, or a print stylesheet and do not remember the exact feature name. Choosing a common breakpoint preset also keeps widths consistent across a project instead of picking slightly different numbers each time.
Everything runs inside your browser, so the selectors and styles you enter are never sent to a server. That is enough to draft breakpoints for a project you have not published, or to reuse declarations you are not ready to commit to a real stylesheet yet.
Choose a Common Breakpoint preset, or leave it on Custom and set Min Width / Max Width yourself.
Pick Max width, Min width, or Range, then add Orientation or an Extra Feature if needed.
Type a CSS Selector and one declaration per line in Declarations.
The Generated Media Query updates as you go; click Copy CSS. Reset restores the defaults.
Yes! All our tools are 100% free to use with no hidden costs, no registration required, and no credit card needed.
Absolutely. All tools run entirely in your browser (client-side). Your data never leaves your device and is not sent to our servers.
Yes, once the page is loaded, the tool will continue to work even if you lose internet connection since it runs in your browser.
There is no strict character limit, but very large amounts of text (100,000+ characters) may slow down your browser.
Yes! All our tools are free for both personal and commercial use.
max-width applies styles at or below a breakpoint (mobile-down design), min-width applies at or above it (mobile-first design), and range combines both to target only a specific band of widths, such as tablets between 576px and 991px.
Mobile is up to 575px, tablet is 576-991px, laptop is 992-1199px, desktop is 1200px and up, and mobile-first is 768px and up -- common Bootstrap-style values, editable after picking a preset if your project uses different numbers.
It adds a second media feature alongside width, such as (prefers-color-scheme: dark) for dark mode, (prefers-reduced-motion: reduce) for accessibility, (hover: hover) to detect a mouse-like pointer, (pointer: coarse) for touch screens, or a print media type for print stylesheets.
No. Type one property and value per line in Declarations and the generator adds a trailing semicolon automatically if you leave it off, so a plain line like padding: 16px works the same as one you have already punctuated.
Not directly -- the tool nests one selector inside the @media rule. For multiple selectors, generate the query once, then add further selector blocks inside the braces by hand.
When "Add a comment describing the breakpoint" is checked, the generator adds a /* ... */ line naming the preset or width range above the @media rule, which makes a stylesheet with many breakpoints easier to scan later. Uncheck it for a cleaner, comment-free output.