Calipers

Precision measurement for the web. A free, open-source browser extension with five measurement modes, a colour picker, design token extraction, typography inspection, and more — with pixel-perfect accuracy.

Modes

  • 1InspectDimensions, box model, CSS path, typography & viewport distances
  • 2MeasureClick up to 5 elements — all gaps measured simultaneously
  • 3GuidesDraggable guides with snap-to-element edges, persisted across sessions

Tools & Overlays

  • Box model overlayColour-coded margin / border / padding / content rings on any element
  • Ruler overlayPixel rulers along the viewport edges with cursor crosshair
  • Design tokensExtract all CSS custom properties; export as JSON with one click
  • Screenshot exportCapture the visible viewport with measurements baked in

Shortcuts

  • Switch mode1 – 5
  • Toggle box modelB
  • Open design tokensD
  • Capture screenshotS

Browser Support

ChromeManifest V3
FirefoxManifest V2

Open Source

Calipers is free and open source under the MIT License. Contributions, bug reports, and feature requests are welcome on GitHub (opens in new tab).