CSS Breakpoint Button Autor: Div or Die

CSS Breakpoint Button shows the current CSS breakpoint and viewport width of any page as a small draggable badge, colored to match the breakpoint you're in.

The popup is a live readout for the active tab: it renders your 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. Bootstrap and Tailwind CSS rule sets come prepackaged, and the rule set editor makes custom ones straightforward: name your breakpoints, set their max widths, pick a color per tier, and the scale preview updates as you type.

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.