/* ─── Breakpoints (min-width · mobile-first) ─────────────────── */
/* xs — default (no query needed; applies to all sizes) */
/* sm — 576px and up */
@media (min-width: 576px) {
}
/* md — 768px and up */
@media (min-width: 768px) {
}
/* lg — 992px and up */
@media (min-width: 992px) {
}
/* xl — 1200px and up */
@media (min-width: 1200px) {
}
/* xxl — 1400px and up */
@media (min-width: 1400px) {
}
/* ─── Feature Queries ─────────────────────────────────────────── */
/* Dark Mode */
@media (prefers-color-scheme: dark) {
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
}
/* Print */
@media print {
}
Related Tools
CSS AutoprefixerVendor prefixes + Browserslist
Responsive PreviewTest any screen size
REM ↔ PX ConverterBase font size calculator
CSS Clamp() GeneratorFluid responsive typography
Flexbox BuilderVisual layout editor
CSS Grid BuilderVisual grid layout editor
Tailwind FormatterSort & group classes
CSS → TailwindConvert CSS to utilitiesCSS Media Queries Generator — Breakpoints, Features & 4 Output Formats
What's included
Features
or modern Level 4 range syntax (width >= X)` — works across CSS, SCSS, and JS outputs- 1px upper bounds in SCSS@media rules with section headers for breakpoints, ranges, and feature queries$bp-* variables aligned for readability + @mixin bp-* and feature mixins with @content — paste into a _breakpoints.scss partialtheme.screens config object with standard breakpoints and feature raw variants; supports both min-width and max-width (desktop-first) formatsbp numeric object + mq string object for styled-components, Emotion, and CSS-in-JS; includes usage commentAbout this tool
Generate CSS Media Queries for Bootstrap, Tailwind, or Your Own Breakpoints — 4 Output Formats
You're starting a new project and need to configure breakpoints consistently — but should you use Bootstrap's values, Tailwind's, or something custom? You need a dark mode media query, a retina image query, and a print stylesheet block, but you can't remember the exact syntax for each. You want a shared SCSS breakpoints partial the whole team can @include from. This tool generates all of it at once from a single configuration.
Select a preset — Bootstrap 5 (xs, sm, md, lg, xl, xxl), Tailwind CSS (sm, md, lg, xl, 2xl), or Material UI (xs, sm, md, lg, xl) — and edit any breakpoint name or pixel value to match your design system. Toggle between min-width (mobile-first) and max-width (desktop-first). Switch between traditional (min-width: 768px) syntax and the modern Level 4 range syntax (width >= 768px) — 95%+ browser support globally.
Ten feature query toggles add non-dimension queries: dark mode (prefers-color-scheme: dark), reduced motion, high contrast, print, retina/2×, portrait, landscape, touch, and no-hover. Each generates the correct @media rule needed for accessibility and multi-device support.
Four export formats: plain CSS with comments, SCSS with $bp- variables and @mixin shortcuts ready for a _breakpoints.scss partial, a Tailwind screens config object for tailwind.config.js, and a JS export with bp values and mq strings for styled-components and Emotion. Enable Include range queries for the "only" queries that target a single breakpoint without cascading.
Step by step
How to Use
- 1Choose a framework presetClick Bootstrap 5, Tailwind CSS, or Material UI to load the standard breakpoints for that framework. Bootstrap 5 loads six breakpoints (xs through xxl), Tailwind loads five (sm through 2xl), and Material UI loads five (xs through xl). Select any preset as a starting point even if you plan to customize — it is faster than building from scratch.
- 2Edit breakpoint names and valuesThe breakpoint list shows each entry sorted by pixel value. Click any name field to rename it, or click the number field to change the pixel value. Click × to remove a breakpoint. Click "+ Add Breakpoint" to append a new one pre-filled 200px above your current maximum. A "custom" badge appears in the preset bar whenever you modify a preset's values.
- 3Set direction and syntaxUse the
min-width/max-widthpills to choose mobile-first or desktop-first query direction. Then choose Traditional ((min-width: X), works in all browsers) or Range syntax ((width >= X), supported by 95%+ of browsers globally as of 2026 and considered the modern standard). Your choice applies to the CSS, SCSS, and JS outputs simultaneously. - 4Enable range queries if neededCheck "Include range queries" to add a second section of single-breakpoint "only" queries — for example, a query that targets sm-size screens specifically without cascading to md and above. These use the
and (max-width: next - 1px)pattern in CSS and SCSS, and the< nextcomparison in range syntax. - 5Toggle feature queriesScroll to the Feature Queries section and enable any non-dimension media features your project needs. Dark mode (
prefers-color-scheme: dark) and Reduced Motion are on by default. Other options include Light Mode, High Contrast, Print, Retina/2×, Portrait, Landscape, Touch (coarse pointer), and No Hover. Each enabled feature adds the correct@mediablock to all four output formats. - 6Copy in your preferred formatClick the CSS, SCSS, Tailwind, or JS tab at the top of the right panel to switch output format. CSS gives annotated
@mediablocks. SCSS gives$bp-*variables plus@mixin bp-*shortcuts ready for a_breakpoints.scsspartial. Tailwind gives atheme.screensconfig object fortailwind.config.js. JS givesbp(numeric values) andmq(string expressions) objects for styled-components and Emotion. Click ⎘ Copy to copy.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Min-width queries implement a mobile-first approach: you write default styles for small screens and use @media (min-width: 768px) to add or override styles for larger screens. This is considered best practice because it keeps your baseline CSS simple and adds complexity as the viewport grows. Max-width queries implement a desktop-first approach: you write default styles for large screens and use @media (max-width: 767px) to override styles for smaller screens. Both approaches produce the same visual result — the choice depends on your workflow. Mobile-first is generally recommended for new projects because mobile traffic dominates and it tends to produce leaner, more performant stylesheets.
The modern range syntax was introduced in the Media Queries Level 4 specification and uses comparison operators instead of min-/max- prefixes. Traditional syntax: @media (min-width: 768px). Modern range syntax: @media (width >= 768px). For a range between two breakpoints: traditional uses @media (min-width: 576px) and (max-width: 767px), while modern uses @media (576px <= width < 768px). The modern syntax is more readable, supports half-open intervals, and avoids the off-by-one pixel issues common with min/max (like using 767.98px). Browser support for range syntax is 95%+ globally as of 2026, making it safe for production use in most projects.
Bootstrap 5 defines six breakpoints: xs (0px — the default, no query), sm (576px), md (768px), lg (992px), xl (1200px), and xxl (1400px). Bootstrap uses a mobile-first approach, so these are all min-width breakpoints. The framework generates utility classes like .d-md-flex, .col-lg-6, and .container-xl based on these breakpoints. Bootstrap also uses fractional pixel values like 575.98px for max-width queries in its internal CSS to avoid the edge case where a browser renders a 576px wide viewport as both sm and below-sm simultaneously.
Tailwind CSS uses five default breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), and 2xl (1536px). All are min-width breakpoints, making Tailwind inherently mobile-first. Breakpoints in Tailwind are applied as class prefixes: sm:text-lg means text-lg applies at 640px and up. Unlike Bootstrap, Tailwind does not include a zero-breakpoint for the smallest size — mobile styles are applied by using unprefixed classes. The Tailwind config supports custom breakpoints, max-width breakpoints (screens.md.max), and feature-based variants (screens.dark.raw) using the raw property.
Copy the SCSS output and paste it into a _breakpoints.scss (or _mixins.scss) partial in your SCSS project. Then import it at the top of your other SCSS files: @use "breakpoints" (Sass modules) or @import "breakpoints" (legacy). Use the mixins with @include: .element { font-size: 14px; @include bp-md { font-size: 16px; } @include dark-mode { color: #f0f0f0; } }. The mixins use @content which means your rules are injected inside the generated @media block. SCSS compiles the $bp-* variables at build time, so the output CSS uses plain pixel values — not CSS variables — which is important because CSS custom properties (var()) cannot be used inside @media conditions.
The Tailwind config output shows the screens section of your tailwind.config.js. Copy the screens object and paste it into the theme section of your existing config file. For Tailwind v3: replace or extend the existing screens in theme.screens or theme.extend.screens. For Tailwind v4 (CSS-first config), breakpoints are defined differently using @theme { --breakpoint-md: 768px; } in your CSS file — the JS config format shown here applies to v3. Feature-based variants like dark and motion-reduce in the screens config create custom variants you can use as class prefixes: dark:bg-gray-900 and motion-reduce:transition-none.
Breakpoint queries test the viewport or device dimensions (width, height, aspect ratio, resolution). Feature queries test user preferences or device capabilities rather than dimensions. Examples include: prefers-color-scheme: dark (user has enabled dark mode in OS settings), prefers-reduced-motion: reduce (user has requested less animation in accessibility settings), prefers-contrast: more (high contrast mode enabled), pointer: coarse (touch device with imprecise input), hover: none (device cannot hover, typically touch), orientation: portrait/landscape (screen rotation), print (document is being printed), and min-resolution: 2dppx (retina or high-DPI display). Feature queries do not trigger at specific pixel widths — they respond to the user's environment and preferences, making them essential for accessibility and multi-device support.
In traditional media query syntax, min-width and max-width are both inclusive. So @media (min-width: 576px) and (max-width: 768px) would match both a 576px viewport (the sm breakpoint) AND a 768px viewport (the md breakpoint) simultaneously. To create exclusive ranges, the upper bound is set to one pixel below the next breakpoint: max-width: 767px. In SCSS, this can be expressed as $bp-md - 1px (768px - 1px = 767px) using Sass arithmetic. This ensures the "sm only" range catches viewports from 576px to exactly 767px, with 768px and above belonging to "md". In modern range syntax, you use the < operator instead: (576px <= width < 768px) which makes the intent explicit without the off-by-one calculation.
Yes. The JS output exports two objects: bp (numeric pixel values) and mq (string media query expressions). The bp object is useful for JavaScript-driven breakpoint logic or when passing values to a charting library. The mq object is designed for use with CSS-in-JS libraries. With styled-components: const Box = styled.divcolor: #333; ${mq.md} { font-size: 18px; }. With Emotion (CSS prop): css={{ [mq.md]: { fontSize: 18 } }}. With vanilla CSS Modules or plain React, you would typically not use the JS strings directly — use the CSS or SCSS output instead. For Next.js App Router server components, use the CSS output; for styled-components with Next.js, use the JS output with the ServerStyleSheet configuration.
When "Include range queries" is enabled, the CSS and SCSS outputs gain an additional section showing "only" queries — media queries that target a specific breakpoint range exclusively. For example, with Bootstrap breakpoints: the main section shows @media (min-width: 576px) which means "sm and everything wider." The range section adds @media (min-width: 576px) and (max-width: 767px) which means "sm only, not md or wider." These are useful when you need styles to apply exclusively at one screen size — for example, hiding a sidebar only on tablet-sized screens without affecting mobile or desktop. In SCSS, the range mixins are named with -only suffix: @include bp-sm-only. The range queries follow the convention of placing the upper bound at (next breakpoint - 1)px.