Online Ruler
Measure anything on your screen in pixels, cm, or inches — calibrated to your exact display.
Step 1: Calibrate with a credit card
Hold a real credit/debit card (or any ID-1 card, 85.6 × 53.98 mm) up to the rectangle below. Drag the slider until the rectangle exactly matches your card's width, then every measurement on this page will be accurate for your screen.
Step 2: Measure
Click and drag along the ruler to measure the on-screen distance between two points.
Ruler track: 32.00 cm total. Scroll horizontally if it overflows your screen width.
How this online ruler works
Every display has a different pixel density, so a fixed number of on-screen pixels doesn't correspond to the same physical size on every device — a 100px box looks bigger on a low-DPI monitor than on a Retina laptop screen. This tool solves that with a one-time visual calibration: drag the slider until the rectangle matches a real credit card (85.6 × 53.98 mm, the standard ISO/IEC 7810 ID-1 size used by all bank cards, driver's licenses, and gift cards). That gives an exact pixels-per-millimeter ratio for your screen at your current browser zoom level, which is then used to draw an accurate ruler and convert your click-and-drag measurements into real centimeters or inches.
Your calibration is saved locally in your browser (localStorage) so you only need to do it once per device — nothing is uploaded or sent anywhere. If you change your browser's zoom level, re-run the calibration since it changes how many real pixels each CSS pixel occupies.
Private & free — this tool runs entirely in your browser.