CSS Media Query Generator
Generate responsive media queries for the standard breakpoint classes, mobile, tablet, and desktop, plus specialty queries like retina displays, dark mode, and reduced motion.
How to use the CSS Media Query Generator
- Select the type of media query you need.
- Choose min-width or max-width direction for your breakpoint.
- Enter the pixel value for the breakpoint.
- Copy the generated @media block into your CSS.
When the CSS Media Query Generator is useful
- Structuring a responsive stylesheet with consistent breakpoints.
- Adding dark-mode styles via prefers-color-scheme.
- Serving sharper assets on retina displays.
- Respecting user motion preferences with prefers-reduced-motion.
How the CSS Media Query Generator works
Breakpoints are convention-defined by the device classes they serve, roughly 768px for tablets and 1024px or 1200px for desktops, and the generator wraps your choice in the correct min-width or max-width syntax. The specialty queries map to real user preferences and hardware capabilities, which is why they belong in modern stylesheets. Output is a ready-to-fill @media block with your values substituted.
Limits to keep in mind
Breakpoints should follow your content's behavior, not fixed device sizes; adjust the pixel values to where your layout actually breaks.
Frequently asked questions
Min-width or max-width: which should I use?
Min-width with a mobile-first approach is the common modern convention; use max-width when adapting a legacy desktop-first stylesheet.
What is prefers-color-scheme?
A query that reports whether the user chose a light or dark system appearance, enabling dark-mode styling.
Why include prefers-reduced-motion?
It lets you disable or soften animations for users who experience motion sensitivity, an accessibility best practice.
Last reviewed: October 2026.