Local CSS media query generator

Build responsive CSS media queries with live preview

Choose viewport bounds and accessibility conditions, then copy a ready-to-paste @media block.

Media typeMinimum width (px)Maximum width (px)Orientation

Respect reduced motion preference

CSS ready

Generated media query

@media screen and (min-width: 768px) {
  /* Add responsive styles here */
}

Everything runs in your browser. Nothing is uploaded or saved.

Use min-width for mobile-first additions and max-width when a rule should stop above a size.

Combine width with orientation or reduced-motion preferences when the behavior depends on more than viewport size.

Keep the generated condition focused, then add the declarations your component needs inside the block.

What does min-width mean?

The rule matches when the viewport is at least the chosen width.

Can I leave both widths empty?

Yes. The tool creates a valid media type block ready for your declarations.

Why include reduced motion?

It lets you adapt animations for people who request less motion in their operating system.