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
• 4Colour PickerSample element colours and copy as HEX, RGB, or HSL
• 5Spacing GridShow all gaps between sibling elements at once

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
• Typography inspectorFont family, size, weight, line-height, and letter-spacing for text nodes
• Viewport distancesDashed lines from element edges to viewport edges with px labels
• Element pathCSS selector breadcrumb of the hovered element shown inline
• Multi-element measurePin multiple elements; every consecutive pair is measured at once

Shortcuts

• Switch mode1 – 5
• Toggle box model overlayB
• Open design token panelD
• Capture screenshotS
• Show all shortcuts?
• Clear guidesDel / ⌫
• DeactivateEsc

Browser Support

Open Source

Calipers is free and open source under the MIT License. Contributions, bug reports, and feature requests are welcome on GitHub.