Skip to content
TextArray1.87.0
100% local

CSS media query generator

Generate mobile-first or desktop-first CSS media query blocks from Bootstrap, Tailwind or custom breakpoints.

Output
Related tools
CSS clamp() generatorDeveloper tools
CSS unit converterDeveloper tools
CSS grid generatorDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
CSS media query generator
Pick a breakpoint scale and this tool writes the matching @media blocks for you, ready to paste into a stylesheet. Choose the Bootstrap or Tailwind presets to reuse the breakpoints those frameworks ship with, or switch to Custom and type your own widths as a comma- or line-separated list — bare numbers like "480, 768, 1024" are auto-named, or pair each one with a label such as "tablet:768".
Mobile-first output cascades upward with min-width only, the pattern most component CSS is written in today; desktop-first cascades downward with max-width only, largest breakpoint first. Turn on range syntax to bound every breakpoint on both sides instead — each block then applies to that tier alone, with the top tier left open above. Widths print in px, em or rem, assuming the common 16px root font size for the conversion. Four extra toggles append standalone queries for orientation, hover-capable pointers, prefers-color-scheme and prefers-reduced-motion, useful when a page needs those checks alongside its layout breakpoints. Switch the output format to SCSS and every block becomes a named @mixin with @content instead, so your Sass build can @include it wherever the rule is needed.
A breakpoint list that resolves to nothing usable — empty, or every entry non-numeric — is reported clearly rather than producing broken CSS; duplicate widths collapse to one block, keeping their first name. Very long custom lists are capped so pasting a huge or malformed value never freezes the tab.
Everything runs locally in your browser — nothing you type is uploaded anywhere. Copy the result, download it as a .txt file, or send it straight to another tool's input to keep working on it.
FAQ
What is the difference between mobile-first and desktop-first here?
Mobile-first generates ascending min-width-only queries (styles apply from that width upward); desktop-first generates descending max-width-only queries (styles apply below that width), largest breakpoint first.
What does range syntax change?
With range syntax on, each breakpoint gets both a min-width and a max-width, so its block applies only within that band instead of cascading. The largest breakpoint still has no upper bound.
Why is Tailwind's top breakpoint labeled "xl2" instead of "2xl"?
A CSS or SCSS identifier cannot start with a digit, so the generator uses "xl2" for that tier — the pixel value (1536px by default) is unchanged.
Can I use my own breakpoints instead of a preset?
Yes. Switch the preset to Custom and list widths separated by commas or line breaks, each as a bare number (auto-named) or "name:value", such as "tablet:768".
Is my breakpoint list uploaded anywhere?
No. Every media query is generated entirely in your browser and never leaves your device.