Getting Started with Calipers
Calipers is a free, open-source browser extension that lets designers and developers instantly measure distances, inspect dimensions, and check alignment on any webpage. Think PixelSnap, but for the browser — with direct DOM access for pixel-perfect accuracy.
Install
The fastest way to get started is the Chrome Web Store. Click Add to Chrome, then press Cmd+Shift+M (Mac) or Ctrl+Shift+M (Windows/Linux) to activate on any page.
Prefer to build from source? See the full installation guide.
Quick Tour
Activate Calipers
Press Cmd+Shift+M / Ctrl+Shift+M to toggle Calipers on the current page. A floating control panel appears in the top-right corner with the mode switcher and contextual settings.
Five Measurement Modes
- Inspect (1) — Hover elements to see dimensions, typography, CSS path, and viewport distances.
- Measure (2) — Click elements to measure pixel distance between closest edges. Pin up to five at once.
- Guides (3) — Place draggable alignment guides with snap-to-element edges.
- Colour picker (4) — Sample colours and copy as HEX, RGB, or HSL.
- Spacing grid (5) — Show all gaps between sibling elements at once.
Tools & Overlays
- Box model (B) — Colour-coded margin, padding, border, and content rings.
- Rulers — Pixel rulers along viewport edges with cursor crosshair.
- Design tokens (D) — Extract CSS custom properties and export as JSON.
- Screenshot (S) — Export the viewport with measurements baked in.