CSS Media Query Generator
Media query options
Live preview
About this CSS media query generator
This tool helps you create responsive CSS media queries without writing the full syntax by hand. Choose breakpoints, orientation, color scheme, motion preference, and hover support.
It is useful for building responsive cards, layouts, navigation blocks, dark mode styles, and accessibility-friendly reduced motion rules.
How to use it
- Choose a media type such as screen, print, or all.
- Set min-width or max-width breakpoints for your responsive layout.
- Optionally add orientation, color scheme, reduced motion, or hover conditions.
- Write the CSS body that should apply inside the media query.
- Copy the generated @media block into your stylesheet.
Tips
- Use max-width for mobile-first overrides when targeting smaller screens.
- Use min-width for progressive layouts that grow from mobile to desktop.
- Use prefers-reduced-motion to reduce transitions and animations for users who request it.
- Use prefers-color-scheme for simple dark mode and light mode styles.
Media query checks before adding another breakpoint
Media queries should respond to content and user capabilities, not only familiar device widths that may not match the actual layout.
Use content breakpoints
Add a breakpoint where the layout stops working instead of targeting a particular phone, tablet, or desktop model.
Avoid boundary gaps
Test exact breakpoint values and prefer consistent range syntax so fractional viewport widths do not fall between rules.
Respect user preferences
Review prefers-reduced-motion, color scheme, contrast, forced colors, and input capabilities when the interface depends on them.
Test real viewports
Check portrait and landscape, zoom, browser chrome, split-screen windows, embedded views, and content with longer translations.
Related tools
You may also find these tools useful.