Media Query Generator
Scaffold @media blocks for mobile, tablet & desktop with one click.
See how it works
Watch a quick simulation of this tool in action — no file needed.
How to use Media Query Generator
Follow these steps — everything happens instantly in your browser.
- 1
Step 1. Set the mobile, tablet and desktop breakpoint widths in px.
- 2
Step 2. Choose a strategy: mobile-first (min-width), desktop-first (max-width), or min-width override.
- 3
Step 3. Type the selector your rules apply to (e.g. .container).
- 4
Step 4. Copy the generated @media blocks into your stylesheet.
Why use this tool
Private by design
All processing happens locally in your browser. Open DevTools → Network and you'll see zero file uploads. Ever.
Instant
No upload wait, no queue, no server round-trip. Results appear the moment you drop a file.
Free & unlimited
No accounts, no watermarks, no daily caps. Use it as many times as you like, forever.
Works everywhere
Desktop, tablet or phone — every tool is responsive and installable as a PWA for offline use.
Frequently asked questions
Everything you might want to know about media query generator.
Clamp Calculator
Build fluid font sizes with clamp() and preview them across viewport widths.
CSS Grid Generator
Paint named grid areas visually and copy clean grid-template CSS.
Flexbox Playground
Tune flex-direction, justify, align, wrap & gap — copy container CSS live.
Gradient Generator
Design CSS linear & radial gradients with up to 5 stops — copy-ready.