PixelSpanv2.0.0
jackseigerman.com

Measure anything,
on any page.

PixelSpan is a Chrome and Firefox extension that shows the exact pixel distance between any two elements — like your design tool's measure feature, on the pages you actually ship.

  • Chrome
  • Firefox
  • Manifest V3
  • Open source
  • No data collection
Get it on GitHubTry it right here

Measurement active

Pick any two elements below to measure the gap between them.

This demo is plain HTML. The extension does the same thing on any live page, with devtools-style hover tags and sub-pixel precision.

In the field

Real measurements on a real page.

PixelSpan measuring a dark portfolio homepage in Chrome. Red guide lines cross the page with orange labels reading 400 pixels on each side and 597.4 pixels down the middle, and a floating toolbar at the top reads Measurement active.
Guides and labeled spans drawn straight onto the page — this is jackseigerman.com under inspection.
Two selected elements on a webpage: a heading outlined in violet marked B and a paragraph outlined in blue marked A, connected by a red measurement line labeled 232 pixels.
A in blue, B in violet, and the span between their closest edges: 232px.
PixelSpan's Advanced Mode panel beside a measured page, listing horizontal gap, vertical gap, and shortest distance, plus box model and computed style details for both selected elements.
Advanced Mode: gaps, box model, and computed styles for both elements at once.

Built for real layouts

The details devtools make you dig for.

Honest about overlap

Overlapping elements get an Overlap: W × H readout with the intersection hatched — never a made-up distance.

Alt + click through stacks

When elements sit on top of each other, Alt (Option) + click cycles through everything under the cursor.

Advanced Mode

One toggle opens a panel with the box model, key computed CSS, gap breakdown, and exactly which edges are measured.

Devtools-style hover tags

Hovering shows a tag like div.card · 320 × 48 before you commit, so you always know what you are selecting.

Follows the page

Measurements track scrolling — including nested scroll containers — and window resizes in real time.

Leaves no trace

One isolated overlay element is the only thing added to the page, and it is fully removed when you exit.

How it works

Two clicks from question to answer.

  1. Click the toolbar icon

    Nothing runs until you do. PixelSpan injects its overlay on demand into the active tab only.

  2. Click any two elements

    Your first pick is marked A in blue, the second B in violet, with persistent highlights on both.

  3. Read the span

    A red line with end ticks connects them, labeled with the distance. Press Esc or click the icon again to exit.

Privacy

Your browsing is none of its business.

PixelSpan uses the activeTab permission, so it can only see the tab you deliberately turn it on for. No accounts, no analytics, no remote servers — element positions are read locally and forgotten when you exit.

Read the privacy policy

Specs

Small tool, short spec sheet.

Version
2.0.0
Platforms
Chrome · Firefox 115+
Permissions
activeTab, scripting
Analytics
None
Price
Free, open source