CSS Media Query Generator
Combine a media type, width and height, orientation and prefers-color-scheme into an @media rule, or start from a mobile, tablet, laptop or desktop preset.
not and only go before a media type; with None picked there, all is written. not negates the whole query.
Pasted rules are placed inside the query, indented.
A browser applies the rule when any query in the list matches.
@media (min-width: 768px) and (max-width: 1024px) {
/* your styles here */
}@media (min-width: 768px) and (max-width: 1024px)Turning widths into an @media rule
This generator builds a valid CSS @media rule from simple options: a media type (all, screen, print or speech), a minimum and maximum width, a minimum and maximum height, a minimum and maximum resolution or aspect ratio, a portrait or landscape orientation, a light or dark colour scheme, a reduced-motion, hover or pointer preference, one-click device presets for mobile, tablet, laptop and desktop, and the breakpoints of Bootstrap, Tailwind CSS, Foundation and Angular Material. Each condition you set is combined with and, and empty fields are left out automatically, so you always get a clean, ready-to-paste breakpoint.
How to use it
Type a min-width and/or max-width in px, em or rem (the Unit row), optionally pick an orientation, or tap a device preset to fill common breakpoints instantly. The “Breakpoint ladder” picker goes a step further: Mobile-first (min-width only) lays out a row of “… px and up” buttons that set just the min width, and Desktop-first (max-width only) a row of “Below … px” buttons that set just the max width, a hair under the step so the rule above keeps the step itself. The formatted @media block updates live below the inputs, with your own rules inside it when you paste them into “Your CSS (optional)”. Under the result a line says whether the query matches this browser window right now, worked out by the browser from the same text; a colour-scheme condition follows your system setting, not this site's theme switch. Add as another query (OR) keeps the query in a list the rule also applies to, and the Modifier row puts not or only before the media type. Press Copy to place the rule on your clipboard and paste it straight into your stylesheet.
Frequently asked questions
How are multiple conditions combined?
Every condition you set — width, height, resolution, aspect ratio, orientation, colour scheme, motion, hover and pointer — is joined with the CSS ' and ' keyword inside a single @media rule, after the media type when you pick one. Fields you leave blank are omitted, so you never get empty or invalid conditions. A combination that can never match, such as portrait with a minimum aspect ratio wider than 1/1, is still written as asked and called out under the result. To target several cases at once, press Add as another query (OR): the queries are joined with commas and the rule applies when any one matches. not and only go before a media type, and not negates the whole query.
What do the device presets mean?
The presets fill in common breakpoints: Mobile targets up to 767px, Tablet 768–1023px, Laptop 1024–1439px, and Desktop from 1440px up. They are a convenient starting point that you can fine-tune by editing the width fields.
Can I write a print, dark-mode or em-based query?
Yes. Media type puts all, screen, print or speech at the front — @media print on its own, or @media screen and (orientation: landscape) with a condition. Colour scheme adds (prefers-color-scheme: dark) or light for a dark-mode block. Unit writes every width and height in px, em or rem, and turns the device presets into em or rem at the browser's default font size, which is what em means inside a media query, so the breakpoints follow the reader's text zoom.
Can it add reduced motion, hover or resolution, or use a framework’s breakpoints?
Yes. The Motion, Hover and Pointer rows add (prefers-reduced-motion: …), (hover: …) and (pointer: …) when you pick a value, and add nothing until you do. Min and max resolution boxes take dppx for retina and print rules, and min and max aspect-ratio boxes take a ratio such as 16/9; a range that can never match is called out. “Framework breakpoints” lists Bootstrap, Tailwind CSS, Foundation and Angular Material, and each button, named as the framework names it, sets the min width mobile-first.
Can I write only min-width or only max-width breakpoints?
Yes. Pick a direction in “Breakpoint ladder”. Mobile-first (min-width only) shows a row of “… px and up” buttons, each setting just the min width and clearing the max, so the rule runs on upwards. Desktop-first (max-width only) shows “Below … px” buttons that set just the max width and clear the min; the max is a hair under the step, as Bootstrap writes it, so the rule above takes the step itself and the two do not overlap. The ladders follow the Unit row like the device presets.