Open menu

CSS Media & Container Query Generator

Generate correct media queries and container queries without memorising the syntax. Set minimum and maximum widths in px or em, choose the modern range syntax or the classic min-width form, and add user-preference and device features such as dark mode, reduced motion, increased contrast, hover and pointer accuracy. The preview tells you whether the query matches your current window, and you can export CSS, a Tailwind variant or a matchMedia() script.

Preset gallery

@media (width >= 768px)

@media (width >= 768px) {
  .element {
    /* styles when the query matches */
  }
}

Accessibility checks

  • Pass Pixel breakpoints are fine; em breakpoints adapt when people zoom text, which some designers prefer.
  • Pass Range syntax works in all current browsers (2023+). Use the classic syntax for older ones.

Export code

@media (width >= 768px) {
  .element {
    /* styles when the query matches */
  }
}
Favourites on this device (0)

No favourites yet.

Size
Query type
Syntax
Unit
Media features

How to use the media query generator

  1. Choose @media or @container.
  2. Set the width range. Use 0 for “no minimum” or “no maximum”. Pick px or em for media queries.
  3. Pick the syntax: modern range or classic min/max.
  4. Add media features such as orientation, color scheme, reduced motion, hover, pointer and contrast.
  5. Check the live result: the preview says whether the query matches this window now.
  6. Export CSS, a Tailwind arbitrary variant or a matchMedia() snippet for JavaScript.

Mobile-first breakpoints

Write base styles for small screens, then add min-width queries for larger ones:

.layout { display: block; }
@media (width >= 768px) { .layout { display: grid; grid-template-columns: 1fr 2fr; } }

Common breakpoints are 640, 768, 1024, 1280 and 1536px, but the best ones are where your own layout starts to look wrong.

How it works

A media query applies CSS only when its conditions are true. You set a minimum width, a maximum width or both, and the generator writes them in the classic form (min-width: 768px) or the newer range syntax (width >= 768px). You can add conditions for orientation, color scheme, reduced motion, hover and pointer capability and contrast preference, which are joined with and. Switching the type to a container query writes an @container rule for a named container instead.

Worked examples

Example 1: dark mode

Load Dark mode: @media (prefers-color-scheme: dark). Swap your color custom properties inside it, and the whole site follows the system setting.

Example 2: reduced motion

Load Reduced motion and put animation: none; transition: none for decorative motion inside. This should be on every site that animates.

Example 3: a responsive card component

Load Card container: the wrapper becomes a container named card, and @container card (inline-size >= 400px) switches the card to a horizontal layout wherever it has room, in a sidebar or a full-width section.

Common mistakes

  • Overlapping ranges. max-width: 768px and min-width: 768px both match at exactly 768px; use 767px or range syntax.
  • Desktop-first overrides everywhere. Mobile-first CSS is usually shorter.
  • Ignoring preferences. Reduced motion and dark mode are as important as screen size.

Choosing breakpoints

Start with your content, not device lists. Make the window narrow, widen it slowly, and add a breakpoint where a line becomes too long, a grid looks empty or navigation runs out of space. Name breakpoints by size (md, lg) rather than devices, since new devices appear every year.

Remember that browser zoom changes the effective width. A visitor zooming to 200% on a laptop may get your tablet layout, which is exactly what should happen, so make sure every layout works at every width, not just at the breakpoints themselves.

Frequently asked questions

What is the media query range syntax?

Instead of (min-width: 768px) you can write (width >= 768px), and ranges like (768px <= width <= 1023px). It's easier to read and supported in all current browsers. Choose the classic syntax if you need to support older ones.

When should I use a container query instead?

Use a container query when a component should adapt to the space it's given rather than the whole window, for example a card that switches to a horizontal layout when its column is wide. The parent declares container: name / inline-size, and @container rules respond to its width.

Which user-preference queries matter most?

prefers-reduced-motion (remove or soften animation), prefers-color-scheme (dark mode), and prefers-contrast (stronger borders and colors). Supporting them respects settings people choose for comfort and accessibility.

Are hover media queries reliable?

(hover: hover) tells you the primary input can hover, typically a mouse. Touch-first devices report none. Don't hide essential functions behind hover, even inside these queries.

Which breakpoints should I use?

Choose them where your layout breaks, not for specific devices. Common starting points are around 40em, 48em and 64em, adjusted to your content.

Sources