CSS Media Query Generator

Home/Tools/Media Query Generator

Generate responsive media queries for all device sizes.

No sign-up neededRuns in your browserProduction-ready CSS

Breakpoint Preset

Custom Media Query

768px
@media (min-width: 768px)

Mobile First Breakpoints

sm≥ 640px
md≥ 768px
lg≥ 1024px
xl≥ 1280px
2xl≥ 1536px

Visual Guide

sm
md
lg
xl
2xl
0px1920px
Generated CSS
/* Mobile First Breakpoints */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
@media (min-width: 1536px) { /* 2xl */ }

/* Custom Media Query */
@media (min-width: 768px) {
  /* Your styles here */
}