consolelog.tools

Media Query Generator

Compose a valid CSS media query from feature toggles - min/max width with px/em/rem and a framework breakpoint picker, orientation, prefers-color-scheme, reduced motion, contrast, hover, pointer, aspect-ratio, retina, and print. Output as a raw @media block, an SCSS @mixin, a Tailwind arbitrary variant, or a container query. Everything updates live and the whole query is captured in the URL.

About this ToolHow it works, benefits & use cases

Stop second-guessing media query syntax. This builder assembles a valid media query from a few toggles and outputs it in the exact shape your stylesheet needs. Turn on a min-width and/or max-width clause - in px, em, or rem - and snap the width to a framework breakpoint (Tailwind sm/md/lg/xl/2xl or Bootstrap) or dial in any custom value with the stepper. Layer on the modern media features you actually use: orientation (portrait/landscape), prefers-color-scheme (light/dark), prefers-reduced-motion, prefers-contrast, hover and pointer capability, an aspect-ratio, retina/high-DPI (min-resolution: 2dppx), and print. Every selected feature is joined with and into one expression that updates live as you toggle. Then pick an output target: a raw @media block wrapping a sample rule, an SCSS @mixin that yields @content so you can reuse it across selectors, a Tailwind arbitrary-variant (or a named screen like md: or dark:), or a CSS @container query for component-level responsiveness. Quick presets - Mobile only, Tablet up, Desktop up, Dark mode, Reduced motion, Retina, Print - fill the whole builder in one click, and the full configuration is captured in the URL so you can share it.

How to Use

  1. 1Pick an output format: CSS @media block, SCSS @mixin, Tailwind variant, or Container query.
  2. 2Enable min-width and/or max-width, set the unit (px, em, or rem), and either type a width or snap to a framework breakpoint.
  3. 3Add media features - orientation, color scheme, contrast, hover, pointer, aspect-ratio - or tick reduced motion, retina, and print.
  4. 4Watch the live expression and formatted output update as you toggle, then copy, download, or share.
  5. 5Click a quick preset (Mobile only, Dark mode, Retina, Print, and more) to fill the builder instantly.

Key Benefits

  • Combine min/max width and any media features into one valid expression joined with and
  • Widths in px, em, or rem (em/rem computed from a 16px base) with a framework breakpoint picker
  • Modern features: orientation, prefers-color-scheme, reduced-motion, contrast, hover, pointer, aspect-ratio, retina, print
  • Four output targets: raw @media block, SCSS @mixin with @content, Tailwind variant, and @container query
  • One-click presets for the most common responsive scenarios
  • Live preview of the expression and formatted output as you edit
  • Runs entirely in your browser and is fully shareable via URL

Common Use Cases

  • Generating a min-width breakpoint that matches your Tailwind or Bootstrap config
  • Building a tablet-only range query without memorizing the and syntax
  • Adding a dark mode, reduced-motion, or print query as a reusable SCSS mixin
  • Producing a Tailwind arbitrary-variant for a feature query Tailwind has no named screen for
  • Writing a container query so a component responds to its own width rather than the viewport
Live expression
(min-width: 768px)

Copy, download, share, or pipe to another tool

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

Quick presets

Width

px

Media features

Toggle, do not memorize

Combine any number of media features and the tool joins them with and into one valid expression. The same query is emitted as a raw @media block, an SCSS @mixin wrapping @content, a Tailwind arbitrary variant, or a CSS @container query.

px, em, or rem

Width clauses convert from a 16px base, so 768px becomes 48em or 48rem - useful for queries that should scale with the user's browser font-size setting.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools