Skip to content

CSS Media Query Generator

Generate responsive breakpoints for any device.


Resize your window to preview media query
Generated CSS

How it works

Enter a minimum width, a maximum width, or both, and the tool writes the matching @media rule. The preview box below applies the background colour and font size only when your current window falls inside the range, so you can resize the browser to test it.

The presets fill in common breakpoints:

  • Mobile: up to 575px
  • Tablet: 576–767px
  • Small laptop: 768–1023px
  • Laptop: 1024–1279px
  • Desktop: 1280–1439px
  • Large screen: 1440px and up

More CSS Tools

Visual generators that write the CSS for you.

View all 14
Color Picker & Design Tool (300+ colors) Browse 300+ named colours and copy hex codes.
CSS Animation Generator Build keyframe animations and copy the CSS.
CSS Background Generator Create gradient and image backgrounds in CSS.
CSS Filter Effect Generator Blur, brightness, contrast and more with CSS filters.
CSS Flexbox Layout Generator Build flexbox layouts visually and copy the code.
CSS generator Style buttons, inputs and boxes visually, then copy the CSS.
Scroll to Top