CSS Responsive Breakpoint Generator
Set up a consistent set of responsive breakpoints for your project. Start from the breakpoints of Bootstrap, Tailwind CSS, Foundation, Bulma or Material Design, or enter your own, choose mobile-first or desktop-first, and export them as plain CSS media queries with a responsive container, as Sass map and mixins, as a Tailwind screens config or as a JavaScript module.
- Runs in your browser
- No sign-up
- Free to use
How to use CSS Responsive Breakpoint Generator
- Pick a breakpoint set or enter custom ones.
- Choose mobile-first or desktop-first and px or em.
- Choose the output format.
- Copy the code into your project.
CSS Responsive Breakpoint Generator features
Framework sets
Bootstrap 5, Tailwind, Foundation 6, Bulma and Material 3.
Custom values
Your own names and widths, sorted automatically.
Four formats
CSS, Sass mixins, Tailwind config and JavaScript.
Container
Centred container with max-widths per breakpoint.
No overlaps
Desktop-first ranges stop at .98 below the next breakpoint.
em option
Breakpoints that respond to the user’s text size.
When to use CSS Responsive Breakpoint Generator
- Starting a new stylesheet with a clean breakpoint system.
- Matching a custom design to Bootstrap or Tailwind breakpoints.
- Sharing the same breakpoints between CSS and JavaScript.
- Writing Sass mixins such as @include up(md).
CSS Responsive Breakpoint Generator FAQ
Which breakpoints should I use?
The framework sets are proven starting points, but the best breakpoints are where your own layout starts to look wrong. Resize your page and add a breakpoint there.
Why can’t I use CSS variables in media queries?
Custom properties are resolved on elements, while media queries are evaluated before that, so var() does not work in @media conditions. The widths are therefore written out, or kept in Sass or JavaScript.
Mobile-first or desktop-first?
Mobile-first starts with the simplest layout and adds complexity for larger screens with min-width. It usually needs less CSS and loads the essential styles first.
How do I use the Sass mixins?
Write @include up(md) { … } for medium screens and up, down(md) for below, and between(sm, lg) for a range.
What about Tailwind v4?
Tailwind v4 configures breakpoints in CSS with @theme and --breakpoint-* variables; the notes show the matching lines.
Is anything uploaded?
No. The code is generated in your browser.
A breakpoint system for responsive design
Breakpoints are the screen widths at which a layout changes: a single column becomes two, the navigation expands, the sidebar appears. Using the same small set of breakpoints everywhere keeps a site consistent and makes CSS easier to maintain than queries with arbitrary widths scattered through the code.
Popular frameworks have settled on similar values. Bootstrap uses 576, 768, 992, 1200 and 1400 pixels, Tailwind 640, 768, 1024, 1280 and 1536, and Material Design 3 defines window size classes at 600, 840, 1200 and 1600. The generator knows these sets and the container widths Bootstrap pairs with them.
Plain CSS output writes a commented reference list and one media query per breakpoint, optionally with a centred container that widens step by step. Desktop-first output uses max-width queries that end just below each breakpoint, so ranges never overlap.
Sass output defines a map and up, down and between mixins with a helpful error for unknown names, which is the most convenient way to use breakpoints throughout a large stylesheet. The Tailwind output replaces the default screens, and the JavaScript module exports the values with a matches() helper for components that need to know the current layout.
Choosing em instead of px makes breakpoints follow the user’s preferred text size. Someone who sets a large default font gets the narrower, single-column layout earlier, which prevents text from overflowing in multi-column designs.