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.

Media Query Generator

Build responsive @media rules with breakpoint presets.

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; } }

Related tools

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Box Shadow Generator

HTML & CSS

Layer multiple box-shadows with a live preview.

Clip Path Generator

HTML & CSS

Design polygon clip-path shapes with a live preview.

CSS Animation Generator

HTML & CSS

Build keyframe animations visually with a live preview.

CSS Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Filter Playground

HTML & CSS

Tune blur, brightness, contrast, and more with a live preview.

Frequently asked questions

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