UUUP Tools

Design Tools

Responsive Breakpoint Tester — Live Framework Breakpoints

See which CSS framework breakpoint matches the current window width in real time. Presets cover Tailwind CSS, Bootstrap, and Material UI, plus a custom list for responsive debugging.

Quick switch→Pixel Ruler
ResponsiveBreakpointDesign
Quick switch:Pixel RulerCSS Unit Converter

Favorite this tool

No favorite storage mode has been selected.

Quick actions

Back to Design Tools Browse all tools

Copy this tool URL or open the system share sheet on a supported device.

Use cases

  • Confirm the active responsive breakpoint
  • Compare breakpoint presets across frameworks
  • Reference breakpoints while building layouts

How to use

  1. Pick a CSS framework preset
  2. Resize the browser window
  3. Read the current breakpoint and list

Example input and output

Window width

768px

Tailwind

md breakpoint

FAQ

Which frameworks are supported?

Presets include Tailwind CSS, Bootstrap 5, Material UI, and a custom breakpoint list.

Tools

Related tools

Continue with another translated tool for a nearby task.

Pixel Ruler

Pixel Ruler — Screen Size and Tick Marks

Available

Draw a horizontal or vertical pixel ruler on the page. Adjust length and tick spacing, and view window size plus device pixel ratio to check CSS pixel measurements against layouts and mockups.

Pixels Ruler Measure
Open tool

CSS Unit Converter

CSS Unit Converter — px, rem, em, vw

Available

Convert among px, rem, em, pt, vw, vh, and %. Customize root font size, parent font size, and viewport size for responsive work and design-to-code handoff.

CSS Units Conversion
Open tool