Calipers

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.

View on GitHub

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.