Media Query Generator

Generate responsive CSS @media queries from breakpoint presets (Tailwind, Bootstrap, MUI, Foundation) or your own custom widths. Mix min/max width and height, orientation, color-scheme, pointer type, reduced-motion, and print. Combine multiple queries into a single stylesheet. Copy-ready CSS. Pairs with the CSS Grid, Type Scale, and CSS Unit Converter. Everything runs locally in your browser.

Breakpoint presets

Add breakpoint

Name

Min width (px)

Max width (px)

Conditions

orientation prefers-color-scheme: dark prefers-color-scheme: light prefers-reduced-motion pointer: coarse print hover: none

Orientation

Breakpoints generate @media (min-width: …) blocks, mobile-first by default. Adding a max-width produces a range query. Extra conditions are combined with and. Pairs with the CSS Grid Generator and CSS Unit Converter. Runs locally.