Media
5 items
Description
Measure pixel distances, inspect element sizes, and check alignment on any webpage. Free, open source. Calipers is a free, open-source Chrome extension for designers and frontend developers who need pixel-perfect measurements on live web pages. Measure spacing, inspect dimensions, and verify alignment — without screenshots, without switching apps, and without digging through DevTools. ━━━ MEASURE DISTANCE BETWEEN ELEMENTS ━━━ Click two elements and instantly see the pixel gap between their closest edges. Pin up to 5 elements and measure every pair at once. Copy any value to your clipboard with one click. ━━━ INSPECT ELEMENT DIMENSIONS ━━━ Hover over any element to see its exact width × height. View typography details, CSS selector path, and distances to the viewport edges — all overlaid on the page. ━━━ ALIGNMENT GUIDES ━━━ Drop horizontal and vertical guide lines anywhere on the page. Drag them into position with snap-to-element-edge support. Guides persist across sessions so you can switch modes without losing your layout. ━━━ BOX MODEL OVERLAY ━━━ Visualise margin, padding, border, and content as colour-coded rings directly on the element. Toggle on/off with a single keystroke. ━━━ MORE TOOLS ━━━ • Colour picker — sample and copy colours as HEX, RGB, or HSL • Spacing grid — show all gaps between sibling elements at once • Design tokens — extract CSS custom properties and export as JSON • Screenshot export — capture the viewport with measurements baked in • Ruler overlay — pixel rulers along viewport edges with crosshair ━━━ KEYBOARD-FIRST ━━━ Every action has a shortcut. Switch modes with 1–5, toggle overlays with B, export screenshots with S, and deactivate with Esc. Built for speed. ━━━ FREE & OPEN SOURCE ━━━ Calipers is MIT-licensed and fully open source. No account required. No data collection. Your preferences are stored locally in your browser. Install Calipers and bring pixel-perfect precision to every webpage you work on. Website: https://calipers.solomonakuson.com GitHub: https://github.com/heysolomon/calipers