See the active CSS breakpoint on any page
CSS Breakpoint Button shows the current breakpoint and viewport width of any page as a small draggable badge, colored to match the tier you're in, with Bootstrap, Tailwind, or your own custom rule sets.
What it does
A live readout for the active tab
The popup 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 viewport width.
Bootstrap and Tailwind built in
Both rule sets come prepackaged. Pick one and the badge immediately speaks your framework’s language.
Custom rule sets
Name your breakpoints, set their max widths, pick a color per tier, and the scale preview updates as you type.
Per-site settings
A Bootstrap project and a Tailwind project can sit in adjacent tabs with the right breakpoints shown on each.
Draggable badge, light and dark
Place the badge in any corner or drag it anywhere on the page. Both light and dark themes are designed in.
No data collection
The extension collects no data. Settings live in your browser’s own storage, and nothing leaves your machine.
Readable by your AI agent, too
While the badge is enabled, the extension also publishes the active breakpoint as machine-readable state: data-cbb-* attributes on <html>, a frozen window.__cssBreakpoint global, and a console log on every breakpoint change. Browser-automation tools and AI coding agents can read the real breakpoint map instead of guessing widths from pixels.
<html data-cbb-breakpoint="MD" data-cbb-rule="Bootstrap"
data-cbb-width="800" data-cbb-min-width="768" data-cbb-max-width="992">Screenshots
