Measurely: Web Pixel Ruler

Measurely is a Safari extension. After installing, turn it on in Settings ▸ Apps ▸ Safari ▸ Extensions ▸ Measurely on iPhone and iPad, or Safari ▸ Settings ▸ Extensions ▸ Measurely on Mac, then allow it on the sites you want to measure. The app itself is only the setup and help window — all measuring happens in Safari.

Measurely is a pixel-perfect screen ruler and CSS inspector for Safari on iPhone, iPad and Mac. It measures element sizes, gaps, margins, padding and computed CSS directly on any webpage — no DevTools, no desktop required.

INSPECT
Hover any element to see its size, plus a measured line to whatever visually blocks it on each side.

GAP
Move into the empty space between two elements and its width and height are measured automatically — nothing to hover, nothing to click.

RULER
Drag anywhere for a free width, height and diagonal measurement. Works over images and flat mockups, not just the DOM. Snaps to nearby element edges.

CSS
Click an element to read its computed size, position, padding, margin, border, radius, font family/size/weight and colors, all in plain px — one tap to copy any row.

Switch units between px, rem and em. Customize line color, thickness and the activation shortcut in Settings.

FREQUENTLY ASKED

What is Measurely?
Measurely is a Safari extension that turns any webpage into a pixel ruler and CSS inspector, for measuring UI layouts directly in the browser.

Does Measurely work on iPhone and iPad?
Yes. All four modes — Inspect, Gap, Ruler and CSS — work by touch on iOS and iPadOS, in addition to Mac.

Does Measurely collect any data?
No. Measurely makes no network requests, has no server, no analytics and no advertising code. The only thing stored is your own settings, on-device.

Can I measure the gap between two elements without a design tool?
Yes. Gap mode measures the empty space between elements automatically as you move the cursor — no clicking, no third-party design software needed.