CSS Media Query Generator
Media query options
Query
Media features
CSS inside the media query
Status
Idle
Live preview
Media query preview
Item 1
Item 2
Item 3
Item 4
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.
Related tools
You may also find these tools useful.
CSS Grid Generator
Build CSS Grid layouts with columns, rows, gaps, alignment, live preview, and copy-ready CSS.
Developer Misc
›
CSS Flexbox Generator
Create CSS flexbox layouts with live preview, alignment controls, wrapping, direction, gap, and ready-to-copy CSS.
Developer Misc
›
CSS Container Query Generator
Generate CSS container queries with container type, container name, breakpoint rules, and responsive declarations.
Developer Misc
›
CSS Background Pattern Generator
Create CSS background patterns with dots, grids, stripes, diagonal lines, and checkerboards.
Developer Misc
›
FAQ
What is a CSS media query?
A CSS media query applies styles only when the browser or device matches specific conditions, such as screen width or color scheme.
Should I use min-width or max-width?
Use min-width for mobile-first layouts and max-width when you want to target smaller screens directly.
Can media queries detect dark mode?
Yes. The prefers-color-scheme media feature can target dark or light mode preferences.
Can media queries improve accessibility?
Yes. The prefers-reduced-motion feature lets you reduce or remove animations for users who prefer less motion.