Pixel Ruler
Measure on-screen distances in CSS pixels. Ticks every 10 px, longer ticks every 50 px, numbers every 100 px. The readout also converts to physical size once your screen is calibrated.
CSS pixels vs device pixels
Browsers lay out pages in CSS pixels. High-density screens use several device pixels per CSS pixel; the ratio is your device pixel ratio (see your screen details). A 100 px button on a 3× phone uses 300 physical pixels.
Tips for designers
- Turn on the crosshair (C) and drag markers A and B to measure gaps between elements.
- Double-click to drop guide lines at positions you want to compare.
- Keep browser zoom at 100%, or pixel measurements scale with zoom.
More tools
Printable ruler
Make a custom paper ruler: inches (1/16, 1/8 or tenths), cm/mm, 6 in to 1 m, Letter or A4.
Print a ruler →Ring size finder
Measure a ring on screen and get US, UK, EU and Japanese sizes, or print a ring sizer strip.
Find ring size →Online protractor
Measure any angle with draggable arms. Works on phones, tablets and screenshots.
Measure angles →Printable tape measure
A 150 cm or 60 inch tape you cut, tape together and use for body measurements.
Print a tape →Graph paper
1 mm, 5 mm, 1 cm, ¼ in and ⅛ in grids, plus dot paper, at exact size.
Print graph paper →What is my screen size?
Find your screen's real diagonal in inches, resolution, pixel density and aspect ratio.
Check screen →