On-Screen Pixel Ruler Tool: Measure Any Image in Pixels
On-Screen Pixel Ruler Tool. Drag and resize the box on this pixel ruler to measure any element's width and height in pixels. The hdmi vs displayport standards reference tool lets you search and filter results instantly, with no account required.
Interactive Tool
The On-Screen Pixel Ruler gives you a draggable, resizable box you drop over any element on this page to read off its width and height live, in both CSS pixels and device pixels. Drag the ruler by its body to reposition it, drag the handle in the bottom-right corner to resize it, or click into it and nudge it a pixel at a time with your arrow keys for exact placement. It's the kind of quick spacing check you'd normally pop open DevTools for.
Need the exact size of a button in a screenshot or the gap between two logos in a mockup? The on-screen pixel ruler tool lets you drop in any image and measure the points you care about, reading the answer in pixels straight away and converting it to inches or centimeters once you know the scale. You get exact line lengths, box sizes and positions without opening an image editor.
How the On-Screen Pixel Ruler Tool Measures an Image
Start by choosing an image file to upload (PNG, JPEG, WebP or SVG), or press Ctrl+V and the pasted image appears at once. Everything is processed locally: your browser draws the picture onto a canvas, so nothing leaves your computer. The canvas also lets you zoom in for single-pixel precision before you click.
Line Distance Between Two Points
Click two points and the measuring line between them gives the straight-line length. The formula is Pythagoras applied to the horizontal and vertical offsets:
$$d = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2}$$
A diagonal is always longer than either offset on its own, which is why you measure distance along the line rather than adding the two sides together.
Bounding Box: Box Width and Box Height
Drag between two opposite corners to draw a bounding box. The ruler reports \(w = |x_2 - x_1|\) and \(h = |y_2 - y_1|\), so it doesn't matter which corner you start from. The two dimensions together also give you the aspect ratio of whatever you selected.
Cursor Coordinates in Source-Image Pixels
As you move the pointer, the readout shows its x and y position counted from the top-left corner, which is always (0, 0). Positions are given in source-image pixels, the file's own natural resolution, not the shrunk or enlarged size you see on the page. That keeps every reading identical whether you view the picture at 50% or 400%.
A Worked Example With the Pixel Ruler
Say you are checking a hero banner layout before export. In the pixel ruler you click the top-left corner of the headline at (214, 137) and the bottom-right corner of the product photo at (859, 492). You can try the same clicks on the demo photo before loading your own file. The ips vs va vs tn vs oled comparison lets you search and filter results instantly, with no account required.
| Reading | Input | Result |
|---|---|---|
| Horizontal offset | 859 − 214 | 645 px |
| Vertical offset | 492 − 137 | 355 px |
| Line length | √(645² + 355²) | 736.24 px |
| Box size | Same two corners | 645 × 355 px |
| Calibrated line | 318 px = 50 mm reference | 115.76 mm (11.58 cm) |
The diagonal comes out at 736.24 px, while the box is 645 × 355 px: the same two clicks answer two different questions. Use the line when you need a single gap or length, and the box when a whole element has to fit a slot.
Calibrate the Virtual Ruler to a Known Real-World Length
Pixels have no physical size until you tell the ruler what one of them is worth. Find something in the image whose size you already know, measure it, and enter that value. In the example, a 50-millimeter reference strip spans 318 px, so the scale is 6.36 px per millimeter, and the pixel ruler turns every later reading into one of your calibrated lengths: the 736.24 px diagonal becomes 115.76 millimeters, or 4.56 in. Calibrate once per image, then switch the units of measurement between millimeters, centimeters and inches as you need. The free screen resolution simulator runs entirely client-side — your lookups are never logged or transmitted.
Scale, DPI and PPI for Print
Calibration only works when the photo is flat and square to the camera. For digital files, divide pixels by the target density instead: at 300 DPI for print, the 645 px box width becomes 2.15 in, while at 96 PPI on a typical monitor it spans 6.72 in. Display density decides how big the same pixel count looks.
CSS Pixels vs Device Pixels When You Measure Pixels
A screenshot from a high-density display records device pixels, while web developers write their code in CSS pixels. On a phone or laptop with a device pixel ratio of 2, the 645 × 355 px box from the example is only 322.5 × 177.5 CSS px, exactly half. Divide by 1.5 or 3 for other devices. Check the ratio before you resize an asset or pass a number on, or every value will be off by the same factor.
Checking Tap Targets in a Phone Screenshot With a Pixel Ruler
A checkout redesign is about to ship, and I need to know one thing before signing it off: are the payment button and the close icon big enough to tap? Two box readings in the pixel ruler answer it. The spec asks for 44 × 44 CSS px (WCAG 2.5.5, AAA), with WCAG 2.2's 24 × 24 CSS px (2.5.8, AA) as the hard floor. The short answer turns out to be the button is 42.67 CSS px tall and the close icon only 22.33 × 21.67 CSS px, so both miss the 44 px spec.
All I have is a screenshot from a phone with a device pixel ratio of 3, 1179 px wide. I paste it into the ruler and work in this order:
- Draw a box from the button's corners, (138, 1873) to (1047, 2001): 909 × 128 device px.
- Draw a box around the close icon's hit area, (1012, 211) to (1079, 276): 67 × 65 device px.
- Cross-check the ratio first: 1179 ÷ 3 = 393 CSS px, which matches the phone's viewport width, so dividing every reading by 3 is safe.
| Target | Device px | CSS px at ratio 3 | CSS px if you wrongly assume 2 |
|---|---|---|---|
| Pay button | 909 × 128 | 303 × 42.67 | 454.5 × 64 |
| Close icon | 67 × 65 | 22.33 × 21.67 | 33.5 × 32.5 |
That last column is the trap I watch for. Assume a ratio of 2 and the close icon appears to clear the 24 px floor easily; at the true ratio of 3 it fails it. The ratio matters more than any click accuracy, because a one-pixel slip moves the result by a third of a CSS pixel while a wrong ratio moves it by 50%.
One more ruler line settles level AA. The 2.5.8 spacing exception lets an undersized target pass if a 24 px circle on its centre touches no other target, so I draw a line from the close icon's centre (x = 1045.5) to the right edge of the nearest Back link (x = 914): 131.5 device px, or 43.83 CSS px, well beyond the 12 px radius. Strictly it passes AA; in the hand it is still a thumb-sized miss waiting to happen.
So the ticket I file is specific: grow the close icon's hit area to 132 × 132 device px (44 CSS px) with padding, not a bigger glyph, and add 4 device px (1.33 CSS px) of height to the button so it reaches exactly 128 + 4 = 132 device px, or 44 CSS px.
Horizontal Spacing and Vertical Spacing on a Desktop Ruler
Installed apps add a few tricks a web page can't: they float above every open window, so you can measure the live interface instead of a capture. A typical toolbar offers four modes (bounds, both axes, width-only and height-only), and an activation shortcut opens it from anywhere. The single-axis modes read the gap between two elements, so you check spacing against a design grid exactly as the pixel ruler does on a capture, only live. Clicking finishes the measurement and copies it to the clipboard, ready to paste into a ticket.
Edge Detection and Pixel Tolerance in Windows
Microsoft PowerToys includes a screen ruler utility for Windows that snaps to edges automatically. Edge detection compares neighbouring colours; raising the pixel tolerance (0 to 255) lets it skip soft gradients and drop shadows, while a low tolerance stops at the first faint line.
Pixel Measurements for Screenshots, Mockups and Every Screen Object
- Designers check padding, icon sizes and page layout in a mockup before handing it off.
- QA testers compare a finished build against the spec, one element at a time.
- Shop owners confirm a product image fills the frame a marketplace requires.
Whatever the screen object, measure it twice from opposite ends and you'll catch a mis-click before it reaches the spec. The pixel ruler only reports what the capture contains, so on a Windows laptop or monitor set scaling to 100% before you capture, or the numbers come out silently enlarged.
Choosing an On-Screen Ruler: Browser or Windows App
A web pixel ruler suits one-off checks: nothing to install, and it runs on any operating system. A Windows app is better for daily interface work, because it measures anything on screen without a capture step. If privacy matters, pick an on-screen pixel ruler tool that keeps files in the browser rather than sending them to a server.
Frequently Asked Questions
- Does the pixel ruler upload my image anywhere?
- No. The image is drawn onto a canvas in your own browser, so it is processed locally and never sent to a server.
- How is the line distance between two points calculated?
- It uses the Pythagorean formula: the square root of the horizontal offset squared plus the vertical offset squared, d = √((x2 − x1)² + (y2 − y1)²).
- Can I measure in millimeters, centimeters or inches instead of pixels?
- Yes, once you calibrate. Measure an object of known size, enter its real length and its length in pixels, and every reading is converted with that scale. Without calibration the result stays in pixels, because pixels have no fixed physical size.
- What is the difference between line distance and box size?
- Line distance is the straight diagonal between your two points. Box size is the width × height of the rectangle with those points as opposite corners, so it reports the horizontal and vertical extents separately.
- Why do my measurements look twice as large as the CSS values?
- Screenshots from high-density screens record device pixels. Divide each reading by the device pixel ratio (often 2 or 3) to get CSS pixels.
- Can I measure horizontal and vertical spacing separately?
- Yes. The box width is the horizontal spacing between the two points and the box height is the vertical spacing, so one pair of points gives you both.
- Where do the coordinates start?
- At the top-left corner of the image, which is (0, 0). X grows to the right and Y grows downward, in the image's own source pixels regardless of zoom.