CSS Media Query Generator
Generate responsive CSS @media queries from min-width, max-width, orientation, and device presets — runs 100% in your browser with no upload.
@media (min-width: 768px) and (max-width: 1024px) {
/* your styles here */
}🔒 Built entirely in your browser — nothing is uploaded.
What this tool does
This generator builds a valid CSS @media rule from simple options: a minimum width, a maximum width, a portrait or landscape orientation, and one-click device presets for mobile, tablet, laptop and desktop. 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 pixels, optionally pick an orientation, or tap a device preset to fill common breakpoints instantly. The formatted @media block updates live below the inputs. 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 — min-width, max-width and orientation — is joined with the CSS ' and ' keyword inside a single @media rule. Fields you leave blank are omitted, so you never get empty or invalid conditions.
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.
Is anything I type uploaded to a server?
No. The media query is assembled entirely in your browser with JavaScript. Nothing you enter is sent anywhere, stored, or uploaded — you can even use the tool offline.