Screen Ruler

On-screen pixel ruler to measure anything on the page. Horizontal and vertical guides with draggable positioning.

How to Use Screen Ruler

1

Activate the ruler

Click to place the ruler on screen for measurement.
2

Measure elements

Drag to measure width, height, or distance in pixels.
3

Read the values

See the exact pixel dimensions displayed on the ruler.

Tested tool guide Tested browser tools Checked August 16, 2026

What Screen Ruler does, with a checked example

The Screen Ruler overlays the page with horizontal and vertical rulers you can drag into position, then reads the pixel distance between them so you can measure any element you can see: a card's width, the gap between two buttons, the height of a hero section. It measures what is actually rendered, not what the CSS declares. The surprise most people hit: it counts CSS pixels, the same unit the browser's own layout uses, so on a retina display your physical screen may be 3,024 pixels wide while the ruler reports roughly half that, and zooming the page changes every reading.

Worked example

A concrete input and expected output from the current implementation.

Input

Place the vertical guide at the left edge of a content column (x = 100) and drag the second vertical guide to the column's right edge (x = 640).

Expected output

540 px. The span between guide positions at 640 and 100 is 640 - 100 = 540.

The readout is the difference between the two guide positions, so a column spanned by guides at 100 and 640 measures 540 CSS pixels wide.

How the result is produced

Drag to span, read the gap

Drag the horizontal guide and the vertical guide to the edges of whatever you want to measure; the readout shows the distance between the guide positions in CSS pixels. Both guides move independently, so you can take a width and a height from the same spot, and the readout updates continuously as you drag, letting you settle on the exact edge before reading.

Pixel units and page coordinates

Measurements are reported in CSS pixels, the unit the page's own layout uses and the unit browser developer tools display. A guide dragged across the full window therefore reads the window's CSS width, not the monitor's physical resolution, and any browser zoom scales what you measure along with the page: at 125% zoom, a 400 px element renders 500 px wide and the ruler says so.

Good uses

Checking a finished UI against a design spec: confirm a card is exactly 320 px wide with 24 px gaps before calling the layout done.
Diagnosing a misaligned layout: measure the gap between two adjacent elements to tell whether it is 8 px or 12 px, or whether one element is a few pixels wider than its neighbor.
Matching component sizes: measure the heights of an icon button and a text button in the same toolbar to catch the one that is off by a pixel or two.

Limits and checks

CSS pixels, not physical ones: on a retina display the reading matches the window's CSS width, roughly half the panel's physical pixel count - a 3,024 px wide panel reads about 1,512.
Zoom changes every reading: at 125% zoom a 400 px element renders 500 px wide, so measure at 100% zoom when you need numbers that match the design file or the element's declared width.
Transformed ancestors lie: an element inside a transform: scale(0.5) container renders at half its declared size, and the ruler reports the rendered size; compare against the computed style, and watch whether your guides include padding and borders.

Common questions

Why does the ruler show fewer pixels than my screen's resolution?

It measures CSS pixels, the unit the page's layout uses, not the physical pixels of your display. On a retina MacBook the window's CSS width is typically about half the panel resolution, and developer tools report the same numbers. To get physical pixels, multiply the reading by the device pixel ratio (window.devicePixelRatio).

Why don't my measurements match the width shown in developer tools?

Usually one of three things: the browser is zoomed, so the rendered size differs from the declared width (set zoom to 100%); the element sits inside a transform: scale() or zoomed container, so its rendered size genuinely differs from its CSS width; or your guides include padding or borders that the devtools value excludes. Check the computed style to see which it is.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.