📐 MEASURE
Pixel Ruler
Drag to place a ruler on your screen. Measure widths and heights in pixels, centimetres, or inches — useful for UI design, screenshots, and front-end work.
Detected screen DPI / PPI
—
Measuring…
72 dpi — web standard
96 dpi — Windows default
220+ dpi — Retina / HiDPI
Ruler
Click and drag to place the ruler
Or click anywhere to create a ruler at that position
Tips & Use Cases
🎨 UI & Web Design
Measure spacing, padding, and element sizes directly on your screen to match design specs precisely.
📸 Screenshot Analysis
Open a screenshot in another tab, return here, and measure distances across windows using the pixel ruler.
🖥️ Multi-unit Output
Switch between px, cm, and inches on the fly. The tool uses your screen's detected DPI for accurate physical units.
📱 Responsive Check
Resize your browser to a mobile width and use the ruler to verify breakpoints and layout widths at a glance.
Related Tools
Frequently Asked Questions
Pixel measurements are exact — 1 CSS pixel = 1 screen pixel at 100% zoom. For centimetre and inch measurements, accuracy depends on the DPI detection which is estimated from your screen's devicePixelRatio. On standard monitors this is very close; on HiDPI/Retina displays it may vary slightly.
DPI (dots per inch) or PPI (pixels per inch) measures how many pixels fit in one inch of your screen. Standard monitors are around 96 dpi, while Retina displays can be 220+ dpi. Knowing DPI lets this tool convert pixel measurements into real-world centimetres and inches accurately.
Not directly — browser security prevents cross-tab interaction. However, you can take a screenshot of the other tab, open it in this tab as an image, and then measure elements within that image using the ruler.
Yes. The ruler supports both mouse and touch input. On a touchscreen, use one finger to drag and place the ruler, then drag the handle at the edge to resize it.