Media Query Generator

Generate CSS media queries for responsive design — min/max width, dark mode, print and orientation.

Query type

Min width

Presets (px)

CSS output

Hide on mobile, target tablet and up

@media (min-width: 768px) {
  /* your styles here */
}

Pick a query type, adjust the breakpoints and copy the generated rule straight into your stylesheet.