Skip to content
JustTools

Pixel-Perfect Screen Ruler

A real-size on-screen ruler in centimetres, inches and pixels — calibrated in seconds with a bank card — and a pixel-perfect measuring tool for screenshots, with zoom, a magnifier and one-click element sizes.

Runs in your browser Free · no sign-up

At a glance

  • A real-size ruler in cm/mm, inches or pixels, drawn pixel-perfect at your screen’s resolution — horizontal or vertical, and full screen for the longest ruler.
  • Calibrate once with a bank, credit or Aadhaar PVC card (85.60 mm), an A4 or Letter sheet, a real ruler or your screen size. The calibration is saved and adjusts itself when you zoom the browser.
  • Two draggable markers measure any length in mm, cm, inches, CSS pixels, device pixels and points.
  • Measure screenshots pixel by pixel: zoom up to 6400% with a pixel grid, a magnifier showing the colour under the cursor, and lines that snap to pixel edges.
  • Smart measure: click inside a button, box or gap to get its exact width and height. Set the screenshot scale (1×, 2×, 3×) to read sizes as CSS uses them.
  • Paste a screenshot or capture the screen directly, then save an annotated PNG — everything stays in your browser.

Step by step

How to use the screen ruler

  1. 1

    Calibrate

    Open Calibrate, hold a bank card against the screen and match the box to it — once per screen.

  2. 2

    Measure with the ruler

    Hold an object against the screen and drag the two markers to its ends.

  3. 3

    Measure a screenshot

    Paste or capture a screenshot, choose Smart and click an element — or drag lines and boxes.

  4. 4

    Save

    Copy the list of measurements or save the screenshot with them drawn on.

Features

Everything you need, nothing you don’t

True to size

After a 30-second calibration, a centimetre on screen is a real centimetre.

Crisp ticks

Every mark is drawn on whole device pixels, so lines stay sharp on any display.

Smart measure

One click finds the edges of a button, card or gap and gives its width and height.

Magnifier and colour

See the pixels around the cursor and their hex colour while you measure.

Screen facts

Device pixel ratio, physical resolution, pixels per inch and screen diagonal.

Private

Screenshots and captures never leave your device.

Objects to calibrate with

ObjectSize
Bank, credit or debit card, Aadhaar PVC card85.60 × 53.98 mm (3.37 × 2.125 in)
A4 sheet210 × 297 mm
US Letter sheet8.5 × 11 in (215.9 × 279.4 mm)

Pixels, explained

  • CSS pixel: the unit web pages use. Browsers treat 96 CSS pixels as one inch, but on a real screen that is only a convention.
  • Device pixel: one dot of the display. High-resolution screens have 2 or 3 device pixels per CSS pixel.
  • Device pixel ratio: device pixels per CSS pixel — it also changes when you zoom the browser.
  • PPI (pixels per inch): how densely the screen packs its device pixels; calibration measures it for you.

FAQ

Frequently asked questions

Is this ruler actual size?

Yes, once you calibrate it. Browsers assume 96 pixels per inch, but real screens differ, so an uncalibrated on-screen centimetre can be noticeably off. Calibrate once with a bank card and the ruler matches real centimetres and inches.

What size is a bank card?

85.60 × 53.98 mm (3.37 × 2.125 inches) — the ISO/IEC 7810 ID-1 size used by bank, credit and debit cards and the Aadhaar PVC card. That makes a card the easiest thing to calibrate with.

Can I measure something on my screen, like a window or an image?

Yes. Take a screenshot (Win+Shift+S on Windows, Cmd+Shift+4 on a Mac) and paste it into Measure a screenshot, or press Capture the screen. Then click an element with Smart, or drag lines and boxes, to get sizes in pixels.

Why do my screenshot measurements look twice as big?

On high-resolution screens a screenshot has 2 or 3 image pixels for every CSS pixel. Set Screenshot scale to 2× or 3× to see the sizes as CSS and design tools use them.

Does the calibration survive browser zoom?

Yes. Zooming changes the device pixel ratio, and the ruler rescales itself to stay true to size. Calibrate again if you move the window to a different monitor.

Does it work on phones?

The ruler and screenshot measuring work on phones and tablets; calibrate with a card first. Capturing the screen directly needs a desktop browser.

Keep going

Related tools

New

Image Color Picker

Pick colours from any image: get HEX, RGB, HSL and CMYK codes with a zoom loupe, plus the image’s colour palette. Free, private — nothing is uploaded.

Image ToolsOpen
New

Crop Image

Crop images online to any size or ratio: 1:1, 16:9, Instagram and YouTube sizes, circle crop, rotate, flip and straighten. Free, private and full quality.

Image ToolsOpen
New

Unit Converter

Convert length, weight, area, volume, temperature, speed, data and 8 more quantities — including guntha, bigha, tola and lakh. Type “5 ft 10 in to cm”.

ConvertersOpen
New

CSS to Tailwind Converter

Convert CSS to Tailwind classes online: hover, media queries, dark mode and gradients become variants, colours match the palette. Tailwind v4 and v3, free.

Developer ToolsOpen
New

JSON Formatter & Validator

Format, validate, minify and repair JSON online. Get the exact line and column of every error, a collapsible tree view and sorted keys — private, in-browser.

Developer ToolsOpen
New

XML to JSON Converter

Convert XML to JSON and JSON to XML online. Keeps attributes, arrays and leading zeros intact, shows exact error lines and never uploads your data.

Developer ToolsOpen

Browse every tool

Last updated Report a problem or suggest a feature