CSS Media Query Generator
Generate a CSS @media query block from a breakpoint preset (or custom width) and a condition type — wraps your CSS rules in a ready-to-paste responsive block.
Input
Paste the CSS rules to wrap in the @media block — leave as-is for a placeholder comment.
Output
More ways to use this tool
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-media-query-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"breakpointPreset": "tablet",
"customWidth": "320",
"conditionType": "min-width",
"cssContent": "color: red;"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `css-media-query-generator` tool (CSS Media Query Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.
Embed widget
<iframe
src="https://iotools.cloud/embed/css-media-query-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS Media Query Generator — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Drop this into your own page — free, no key required, just a link back.
| Cost per API/MCP call | From 5 credits |
|---|---|
| Need more credits? | View pricing |
Also available with
Guides
What it does
The CSS Media Query Generator builds a ready-to-paste @media (...) { }
block from a breakpoint width and a condition type. Pick a common device
preset (or set a custom pixel width), choose whether the query should apply
above or below that width — or switch to an orientation check instead — and
paste in the CSS rules you want wrapped. The tool updates the output
instantly as you change any option.
What a CSS media query is
A media query lets a stylesheet apply different rules depending on the viewport's width, height, orientation or other characteristics. The basic shape is:
@media (min-width: 768px) {
/* rules that only apply at 768px and wider */
}Media queries are the foundation of responsive design: instead of shipping one fixed layout, you write a base layout and then override specific properties once the viewport crosses a breakpoint.
Common breakpoints
There's no single official breakpoint scale — different frameworks (Bootstrap, Tailwind, Material Design) each define their own — but a widely used generic scale looks like this:
- Mobile — 480px (small phones and up)
- Tablet — 768px (tablets and small laptops)
- Laptop — 1024px (laptops and small desktop monitors)
- Desktop — 1280px (standard desktop monitors and up)
Pick "Custom" if your project uses a different scale than these.
How to use it
- Choose a Breakpoint Preset (Mobile, Tablet, Laptop, Desktop) or select Custom and enter your own pixel width.
- Choose a Condition Type:
- Min-width — mobile-first, applies at the breakpoint and wider.
- Max-width — desktop-first, applies at the breakpoint and narrower.
- Orientation: portrait/landscape — applies based on the viewport's orientation instead of its width (the breakpoint is ignored for these).
- Paste the CSS rules you want wrapped into CSS to wrap — leave it as
the placeholder comment if you just want the empty
@mediashell. - Copy or download the generated block from the output and paste it into your stylesheet.
FAQ
What's the difference between min-width and max-width?
min-width is "mobile-first": you write base styles for small screens, then
add overrides that kick in once the screen is at least the breakpoint
wide. max-width is "desktop-first": the override applies once the screen
is at most the breakpoint wide — the more traditional approach before
mobile-first became common.
Can I combine min-width and max-width for a range?
This tool generates one condition at a time. For a range (e.g. "only between
768px and 1023px"), generate the max-width version at 1023px and the
min-width version at 768px and combine them by hand with and:
@media (min-width: 768px) and (max-width: 1023px) { ... }.
Why does the breakpoint field do nothing when I pick orientation? Orientation queries respond to the viewport's aspect ratio, not its width, so the breakpoint value isn't part of the generated condition — only the portrait/landscape choice matters.
Does this tool store or upload anything? No. Everything runs locally in your browser — the CSS you paste in never leaves your device.