CSS Breakpoint Button

Automatically detects and displays active breakpoints and viewport width for any site.

CSS Breakpoint Button puts the current breakpoint and viewport width on the page itself, as a small draggable badge colored to match the tier you're in. On most sites there is nothing to set up. The extension works out the widths the page's layout actually changes at from its stylesheets, ignoring the one-off widths that aren't really breakpoints, so you don't have to know which framework a site uses or whether it kept that framework's defaults. When it recognizes a Bootstrap, Tailwind, or Foundation scale it labels the tiers with that framework's own names; anything customized keeps its real width instead of the default you'd have guessed. You can still pin a site to a fixed scale when you want one. Bootstrap and Tailwind rule sets are prepackaged, and the editor covers everything else: name your breakpoints, set their max widths, pick a color per tier, and the scale preview updates as you type. A detected set of breakpoints can be copied into an editable rule as a starting point. The popup is a live readout for the active tab. It renders the selected rule set as a colored scale showing each breakpoint's name and max width, highlights the tier the tab is currently in, and shows the exact width in pixels. Settings are per-site, so a Bootstrap project and a Tailwind project can sit in adjacent tabs with the right breakpoints shown on each. The badge can be placed in any corner or dragged anywhere on the page, and both light and dark themes are designed in. The extension collects no data.