CSS Media Query Generator - Free Online Tool

A CSS media query generator builds the @media rule for you, so your styles apply only at certain screen widths, orientations or media types. Pick a Tailwind CSS, Bootstrap 5 or Material Design preset, or set your own min and max width, add the CSS properties you want, and copy the finished code into your stylesheet.

What Is a CSS Media Query?

A CSS media query is a conditional rule that applies a block of styles only when the device or viewport matches the conditions you set. It is the core tool of responsive design, because one stylesheet can then adapt to phones, tablets, laptops and print.

The basic syntax has three parts: the @media keyword, an optional media type with one or more conditions, and a block of CSS in curly braces. A typical rule looks like @media screen and (min-width: 768px) { ... }. The styles inside run only on screens that are at least 768 pixels wide.

What are CSS media queries used for?

Developers use them to change layouts, font sizes, spacing and visibility as the screen grows or shrinks. Common jobs include turning a one-column mobile layout into a three-column desktop grid, hiding a sidebar on small screens, and removing backgrounds for print.

The conditions this tool supports

• min-width: styles apply when the viewport is at least this wide.
• max-width: styles apply when the viewport is no wider than this value.
• Media type: screen, print or all.
• Orientation: portrait (taller than wide) or landscape (wider than tall).

How to Use the CSS Media Query Generator

You can generate a working media query in under a minute by choosing a breakpoint source, adding your styles and copying the result. Follow these steps.

1. Open the Breakpoint Preset menu and choose Tailwind CSS, Bootstrap 5, Material Design or Custom.
2. For a preset, read the list of breakpoint names and widths shown under the menu. The tool writes one media query for every breakpoint in that framework.
3. For Custom, enter a value in Min Width (px), Max Width (px) or both. Leave one blank if you only need a single limit.
4. Set Media Type to screen, print or all, and set Orientation to Any, Portrait or Landscape.
5. Type the declarations you want in CSS Properties to Include, one per line, such as font-size: 16px; and padding: 1rem;. If you leave it empty, the output contains a placeholder comment instead.
6. Drag the Active breakpoint slider (320 to 2000 pixels) to see which breakpoint is active at any viewport width.
7. Check the Generated CSS box and press Copy.

The output updates as you change any field, so there is no separate generate button to press.

Worked Example: A Landscape Tablet Query

Say you want larger text and extra padding on tablets held sideways. Choose Custom, set Min Width to 768 and Max Width to 1024, keep Media Type on screen, and set Orientation to Landscape. In the properties box, enter font-size: 18px; and padding: 2rem;.

The tool returns one rule: @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape), followed by your two declarations inside the braces. Each condition is joined with and, so all of them must be true. A phone in landscape at 700px wide would not match, and neither would a tablet in portrait.

Now try the Tailwind preset instead. You get five rules labeled SM, MD, LG, XL and 2XL, each with a min-width of 640, 768, 1024, 1280 and 1536 pixels. Because they only set a minimum, larger breakpoints build on the smaller ones. That is the mobile-first pattern.

How Do You Read the Results and Preview?

The Generated CSS box holds code you can paste directly, while the preview shows which breakpoint is active at the width you pick with the slider. Together they let you check the logic before you write any layout code.

Preset breakpoints at a glance

Tailwind and Bootstrap presets use min-width only, so each rule keeps applying on wider screens. Material Design presets define bounded ranges, for example 600 to 959 pixels for sm, so each rule applies to its own band. At the default slider value of 1280 pixels, Tailwind shows xl, Bootstrap shows xl and Material shows lg.

What the preview tells you

The range text under the breakpoint name reads like "≥ 1280px". If it also shows "and ≤ 1279px", the rule stops at that upper limit. Use this to confirm that the breakpoint you plan to target covers the device width you have in mind, such as 390px for a modern phone or 820px for a tablet.

What Is Max-Width in a CSS Media Query?

Max-width in a media query means the rule applies when the viewport is at most that wide. @media (max-width: 767px) matches phones and small windows, and stops matching at 768px and above.

Min-width and max-width describe the same screen from opposite directions. A mobile-first stylesheet writes base styles for small screens and then adds min-width queries as space grows. A desktop-first stylesheet starts wide and uses max-width queries to simplify. Most teams prefer mobile-first because phone styles stay short and larger screens add only what they need.

You can combine both in one query to target a band, such as 768px to 1023px. That is the Custom mode of this CSS media query generator.

Who Uses a Media Query Generator?

Anyone who writes responsive CSS by hand can save time and avoid syntax slips with a generator. These are the most common situations.

• Front-end developers who need all of a framework's breakpoints as plain CSS, without installing the framework.
• Students learning how min-width, max-width and and fit together, who can change one field and see the code change.
• WordPress and theme editors adding custom CSS for one device range.
• Designers checking which named breakpoint a given width, such as 1100px, falls into.
• Anyone styling print who needs a quick print rule for hiding navigation or ads.

If your layout is the thing you need to adapt, build it first with the CSS Grid Generator and then wrap tweaks in the queries you create here.

Best Practices, Common Mistakes and Troubleshooting

Most problems with media queries come from a few predictable mistakes. Check these first when a generated rule does not seem to work.

Wrap declarations in a selector

The tool places your properties directly inside the media block. In a real stylesheet, declarations need a selector, so change the result to something like .card { padding: 2rem; } inside the braces. Without a selector, browsers ignore the rule.

Add the viewport meta tag

Mobile browsers need <meta name="viewport" content="width=device-width, initial-scale=1"> in the page head. Without it, a phone may pretend to be about 980px wide and skip your small-screen rules.

Avoid overlapping ranges

If one rule ends at max-width: 1024px and the next starts at min-width: 1024px, both match at exactly 1024px. Use 1023px as the upper limit, or rely on min-width only so later rules override earlier ones by source order.

Fix the error message

If you see "Widths must be nonnegative numbers, with minimum no greater than maximum," check that neither value is negative and that Min Width is not larger than Max Width. The Copy button stays disabled until the values are valid.

Choose breakpoints from your content

Preset widths are conventions, not rules. Resize your page and add a breakpoint where the design actually breaks, even if that is 870px.

Keep the order right

Place mobile-first queries from smallest to largest in your file. After you finish, shrink the file with the CSS Minifier or tidy it with the CSS Formatter. If you write SCSS, run it through the Sass to CSS Converter before comparing output.

Limitations to Know

The generator covers width, media type and orientation. It does not create queries for height, resolution, color scheme, reduced motion, hover or container queries. You can add those by hand to the copied code.

Preset mode outputs min-width rules (and a max-width for Material Design) without a media type. Media type and orientation apply only when you choose Custom. The active breakpoint preview is a guide for named presets and shows only the name "custom" in Custom mode.

The tool does not check your page for responsive problems. Test the final result in your browser's device mode and on real devices.

You now have what you need to produce clean, copy-ready responsive CSS. Choose a preset or set your own range in the generator above, add your properties, and copy the code. For more helpers like this, browse the web developer tools collection, or add motion to your new layouts with the CSS Animation Generator.