Pixel ruler — measure screenshots in px, pt, dp and rem
Drop or paste a screenshot, pick its scale (@1x, @2x, @3x), and measure spacing, sizes and corner radii. Points snap to pixel edges when you zoom in, so a 32 px gap reads 32. Copy the results as a Markdown table for your ticket, or as border-radius CSS.
Drop, paste or capture a screenshot to measure it.
Or press Ctrl+V to paste. Images stay in your browser — nothing is uploaded.
From @2x and @3x screenshots to pt, dp and rem
A screenshot from a Retina Mac or an iPhone has two or three image pixels for every point the designer meant. Measure it raw and every number is doubled or tripled. Tell the pixel ruler the image scale — @1x, @1.5x, @2x, @3x or @4x — and every value reads in logical units: CSS px for the web, pt for iOS, dp for Android (the same number, labelled the way your platform says it), with the raw image px in brackets. Switch to rem and the value is divided by the root font size, 16 by default and adjustable. Screen captures taken with this tool start at your display’s pixel ratio, so a capture of a @2x screen is already set to @2x.
Spacing, sizes and pixel-edge snapping
Designers mostly need gaps: the padding inside a card, the space between two buttons, the height of a row. Every distance shows its length together with Δx and Δy and its angle, so a slightly slanted click still gives you the clean horizontal gap. Zoom in and points snap to pixel boundaries, not pixel centres, so a 24 px gap reads 24, not 23.6 — hold Alt to place freely. From 8× zoom a pixel grid appears, and the loupe shows the pixel under the cursor with its hex color, so you can tell a 1 px border from anti-aliasing. Wheel or pinch to zoom at the pointer, drag to pan; the minimap and Back bring you home.
Corner radius to CSS border-radius
Rounded corners are the hardest thing to eyeball in a mock-up. Use the arc measure: click where the straight edge starts to bend, a point on the curve, and where it ends. The pixel ruler fits the circle through them and gives the radius in your unit — and a ready border-radius line to copy into your CSS. The circle measure does the same for round avatars, badges and icons, and the curve measure follows a path of clicked points for the length of a wavy line or a stroke.
Into the ticket — and on to the colors of the same screenshot
Name your measures (“card padding”, “button gap”), give each line its own color, and hand them over the way your team works: “Copy Markdown” pastes a table straight into Jira, GitHub or Linear, “Copy table” pastes into a spreadsheet, the PNG export draws every line with its name and value like a redline spec, and the project file (.json) reopens the whole session later. The screenshot never leaves your browser. Need the colors too? The color picker opens the very same image with one click, and your picks are still there when you come back. Measuring a photo of a real room instead of a screen? Use measure from a photo, with real units and perspective correction.
Frequently asked questions
How do I measure an @2x or @3x screenshot in pt or dp?
Set the image scale to @2x or @3x (iPhone screenshots are usually @3x, Retina Mac screenshots @2x) and pick pt or dp as the unit. Every value is then divided by the scale, so a 96 px gap in a @3x screenshot reads 32 pt, with the image pixels shown in brackets.
What’s the difference between px, pt, dp and rem here?
px are the image’s own pixels. CSS px, pt (iOS) and dp (Android) are the same logical unit — image pixels divided by the image scale — just labelled the way each platform names it. rem is CSS px divided by the root font size, 16 by default and adjustable.
How do I get a CSS border-radius from a screenshot?
Zoom in on the corner and use the arc measure: click where the edge starts to curve, a point on the curve, and where it ends. The radius appears in your unit, with a border-radius value to copy. More zoom means a more precise radius.
Why does my measurement snap to whole pixels?
When you zoom in, points snap to pixel edges so a 24 px gap reads exactly 24 instead of 23.6. Hold Alt while placing or dragging a point to turn snapping off for that point.
How do I draw an exactly horizontal or vertical line?
Hold Shift while you place or drag a point: the line snaps to horizontal, vertical or 45°, and a small badge shows its angle. Zoomed in, the end still lands on a pixel edge, so the length stays a whole number. For many lines in a row, switch on angle snap (the angle button, or S) — 45° or 15° steps without holding Shift; Shift then frees the angle.
Can I pick colors from the same screenshot?
Yes. “Pick colors in this image” opens the same screenshot in the color picker without uploading or dropping it again, and “Measure this image” brings you back — your measures and your picks both stay where they were.
Can I copy the measurements into Jira or GitHub?
Yes. “Copy Markdown” puts a table with names, values and units on the clipboard, ready for a ticket or a pull request. You can also export an annotated PNG, a CSV, plain text, or the JSON project file that reopens the session later.
Which keyboard shortcuts are there?
V view · D distance · C circle · A arc · L curve · M new measure (of the last kind) · R ruler · K reference · H clean view · G magnifier on/off · S angle snap (off / 45° / 15°) · Shift while placing or dragging a point: 45° steps · F fit · 1 actual pixels · B back · arrow keys move the selected point by 1 px (Shift 10, Alt 0.1) · Tab next point · Delete removes the selection · Esc cancels · Ctrl+Z undo / Ctrl+Shift+Z redo.
Is my screenshot uploaded?
No. The screenshot is read and measured entirely in your browser and never leaves your device. It is kept in your browser’s own storage so you can continue later — switch “Keep images on this device” off, or delete it from Recent, whenever you like.