What's the difference between this and a CSS Media Query Generator?

A media query generator builds one @media rule at a time. This tool designs the whole breakpoint system up front — a named, ordered set of widths (sm, md, lg, and so on) that you reuse across a project — then exports it as CSS variables, SCSS variables, or a full stack of @media rules in one go.

Should I use px or em for breakpoints?

px breakpoints are easiest to reason about and match design mockups directly. em breakpoints scale with the user's browser font-size setting, which is friendlier to people who increase their default zoom for readability — a common accessibility preference. This tool lets you toggle between both and see the converted value instantly.

Why are the breakpoints mobile-first (min-width)?

Mobile-first CSS starts with base styles for the smallest screen and layers on min-width media queries as the viewport grows, which usually means less overridden CSS than starting from a desktop-first design and overriding downward with max-width queries.

Can I use these variables directly in a stylesheet?

CSS custom properties (--bp-md: 768px) can't be used inside a native @media condition — media query features don't accept var(). They're still useful for JavaScript (matchMedia, resize logic) and for documenting the system. For actual @media rules, use the Media Queries output format instead.

Does this tool store or upload my breakpoint values?

No — everything runs locally in your browser using React state. Nothing is saved or sent to a server; refreshing the page resets it to the default preset.

RESPONSIVE BREAKPOINT GENERATOR

Design a named set of responsive breakpoints and export them as CSS variables, SCSS, or media queries.

640px

768px

1024px

1280px

1536px

2xl

:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

How to build a breakpoint system

1
Start from a preset (Standard, Device-based, or Bootstrap) or edit the defaults.
2
Rename each breakpoint and drag its slider to set the width.
3
Add or remove breakpoints to match your project's layout system.
4
Switch the unit between px and em, and pick an output format.
5
Copy the CSS custom properties, SCSS variables, or media query rules.

Questions

What's the difference between this and a CSS Media Query Generator?: A media query generator builds one @media rule at a time. This tool designs the whole breakpoint system up front — a named, ordered set of widths (sm, md, lg, and so on) that you reuse across a project — then exports it as CSS variables, SCSS variables, or a full stack of @media rules in one go.
Should I use px or em for breakpoints?: px breakpoints are easiest to reason about and match design mockups directly. em breakpoints scale with the user's browser font-size setting, which is friendlier to people who increase their default zoom for readability — a common accessibility preference. This tool lets you toggle between both and see the converted value instantly.
Why are the breakpoints mobile-first (min-width)?: Mobile-first CSS starts with base styles for the smallest screen and layers on min-width media queries as the viewport grows, which usually means less overridden CSS than starting from a desktop-first design and overriding downward with max-width queries.
Can I use these variables directly in a stylesheet?: CSS custom properties (--bp-md: 768px) can't be used inside a native @media condition — media query features don't accept var(). They're still useful for JavaScript (matchMedia, resize logic) and for documenting the system. For actual @media rules, use the Media Queries output format instead.
Does this tool store or upload my breakpoint values?: No — everything runs locally in your browser using React state. Nothing is saved or sent to a server; refreshing the page resets it to the default preset.