CSS Media Query Generator
Free online CSS media query generator. Copy ready-to-use CSS.
Loading tool...
What is CSS Media Query Generator?
CSS Media Query Generator builds responsive @media rules from Tailwind, Bootstrap, or custom breakpoints. Pick a mobile-first or desktop-first direction, optionally combine hover, pointer, color-scheme, and reduced-motion conditions, and preview which query matches at any simulated viewport width.
Key Benefits
- Exact Tailwind and Bootstrap breakpoint values
- Mobile-first and desktop-first support
- Range queries with min and max width
- Live viewport simulator
- Copy-ready formatted CSS
Common Use Cases
- •Responsive layouts
- •Adapting typography per breakpoint
- •Dark mode styling
- •Accessibility-aware animations
- •Aligning custom CSS with framework grids
How to Use the CSS Media Query Generator
- Pick a breakpoint set: Choose Tailwind, Bootstrap, or Custom. Toggle the breakpoints you want queries for.
- Choose direction: Use min-width for mobile-first or max-width for desktop-first styles.
- Add conditions (optional): Append hover, pointer, prefers-color-scheme, or prefers-reduced-motion conditions.
- Preview and copy: Drag the viewport slider to confirm which query fires, then copy the CSS.
Key Features
- Tailwind, Bootstrap, and custom breakpoint presets
- Mobile-first min-width and desktop-first max-width directions
- Optional hover, pointer, prefers-color-scheme, and reduced-motion conditions
- Live viewport simulator from 320px to 1920px
- Copy-ready formatted CSS with your selector
- 100% client-side, no data sent to server
Frequently Asked Questions
What is a CSS media query?
A media query is a CSS at-rule that applies styles only when the viewport or device matches conditions such as min-width, max-width, or prefers-color-scheme.
What are the default Tailwind breakpoints?
Tailwind CSS v3/v4 uses sm 640px, md 768px, lg 1024px, xl 1280px, and 2xl 1536px. This generator uses those exact values.
What are the default Bootstrap breakpoints?
Bootstrap 5 uses sm 576px, md 768px, lg 992px, xl 1200px, and xxl 1400px.
Should I use min-width or max-width?
Prefer min-width (mobile-first): start with base styles for small screens and layer on styles as the viewport grows. max-width (desktop-first) is mainly useful when retrofitting an existing desktop site.