# CSS Media Query Generator

> Generate responsive breakpoint media queries, with common device presets.

To generate a media query, choose whether you want min-width, max-width, a range, or a preference query for dark mode, reduced motion or print. EM units are recommended over pixels because they respect a user's browser font-size setting.

**URL:** https://convertto.tech/t/media-query-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **Privacy:** Runs entirely in your browser — nothing is uploaded
- **Cost:** Free, unlimited, no sign-up

## How to use

1. Choose the query type.
2. Set the min width.
3. Set the max width.
4. Choose the unit.
5. The result appears immediately — copy or download it.

## FAQ

### Should breakpoints use px or em?

EM is safer. Pixel breakpoints ignore the user's browser font-size preference, so someone who has increased their default text size can end up with a cramped desktop layout on a small window. EM breakpoints scale with that setting.

## Related tools

- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Clip Path Generator](https://convertto.tech/t/css-clip-path-generator): Cut an element to a polygon, circle, ellipse or inset, and copy the clip-path.
- [CSS Multi-Column Generator](https://convertto.tech/t/css-columns-generator): Flow text into balanced columns with a rule between them.
- [CSS Grid Generator](https://convertto.tech/t/css-grid-generator): Build a CSS Grid layout visually and copy the container CSS.
- [CSS Hover Effect Generator](https://convertto.tech/t/css-hover-effects-generator): Generate a hover effect that animates cleanly, with the reduced-motion guard included.