Does it support range queries?

Yes, choose Range to combine a min-width and max-width in one query.

Can I add orientation conditions?

Yes, pick portrait or landscape to append an orientation condition.

Are the breakpoint presets customizable?

Presets set the max-width instantly, and you can still edit the value afterwards.

Is my data uploaded to a server?

No. This tool runs entirely in your browser using standard web APIs, so your input never leaves your device and nothing is logged or stored on our servers.

Does it work offline and on mobile?

Yes. Once the page has loaded it keeps working without a network connection, and the layout is responsive so it stays usable on phones and tablets.

Media Query Generator

Build responsive @media rules with breakpoint presets.

Support

Works Offline

Privacy First

No Login

No API

Mode

Max width (px)

Orientation

Breakpoint presets

Rules inside the query

Generated media query

@media (max-width: 1024px) {
  .element {
    color: royalblue;
  }
}

About the Media Query Generator

Generate CSS @media queries using min-width, max-width, or a combined range, plus optional orientation. Choose from common device breakpoint presets, write the rules that go inside, and copy the full generated query.

Examples

Mobile breakpoint

max-width 640px

Output

@media (max-width: 640px) { .element { color: royalblue; } }

Keyboard shortcuts

Copy the main outputCtrl / ⌘ + Shift + C
Download the resultCtrl / ⌘ + S
Share this toolCtrl / ⌘ + Shift + S
Reset the inputsAlt + R
Open the tool search paletteCtrl / ⌘ + K

Related tools

CSS Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Clamp() Calculator

HTML & CSS

Generate fluid typography clamp() CSS from min/max viewport and size.

CSS Scrollbar Styler

HTML & CSS

Design custom scrollbars with live preview.

CSS Transform Playground

HTML & CSS

Combine translate, rotate, scale, and skew with a live preview.

CSS Variables Theme Builder

HTML & CSS

Build a custom property theme with a live preview.

Email Signature Generator

HTML & CSS

Design a professional HTML email signature and copy it into any mail client.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-09 · Runs entirely in your browser