ffee All tools
EN 中文 FR DE

Media Query Generator

Build a media query from presets and options, then copy it in mobile-first or desktop-first order.

Build a media query

Condition list: —
Order: —
Mobile-first styles add min-width queries in ascending order, while desktop-first styles add max-width queries in descending order, so later rules always win.

How to use the Media Query Generator

  1. Pick a breakpoint preset or type your own minimum and maximum widths.
  2. Add orientation, resolution, colour scheme and reduced motion conditions.
  3. Copy the media query, or follow the ordering table for mobile-first and desktop-first styles.

Features

Advertisement

More tools

Flexbox Generator CSS Grid Generator Button Style Generator CSS Animation Generator CSS Transition Generator CSS Transform Generator CSS Filter Generator Glassmorphism Generator Neumorphism Generator Breakpoint Preview Font Pairing Tool Line Height Calculator

Frequently Asked Questions

Common questions about the free online media query generator.

It applies a block of CSS only when the device matches a condition, such as a minimum viewport width or a dark colour scheme.
Mobile-first is easier to maintain, because min-width queries add styles as the screen grows instead of undoing them.
A min-width query applies at that width and wider, while a max-width query applies at that width and narrower.
It avoids overlapping the next breakpoint. Using one pixel less than the next minimum keeps every rule mutually exclusive.
It targets pixel density, so you can serve sharper images to displays with two or three device pixels per CSS pixel.
Add a prefers-color-scheme condition set to dark and place the dark palette inside that query block.
It reports that the visitor asked for less movement, so animations and transitions should be reduced or removed in that block.
Yes. Join each condition with the word and inside one pair of brackets, exactly as the generator builds the query line.
Yes. It is completely free, runs locally in your browser and needs no account, no sign-up and no upload.

Last updated: October 10, 2026