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.
How to Use Pixel Ruler Online
ToolsPix Pixel Ruler lets you drag a precise ruler anywhere on your screen to measure widths and heights in pixels, centimetres, or inches — all inside your browser, with no software to install and no data ever leaving your device.
Why use ToolsPix Pixel Ruler?
- Completely free with no sign-up or account required.
- Works entirely in your browser — nothing is uploaded or tracked.
- Supports pixels, centimetres, and inches with automatic DPI detection.
- Centimetre and inch readings start as a DPI estimate (shown with ≈) and become exact once you run the optional bank-card or manual-millimetre calibration.
- Drag and resize the ruler, or switch between horizontal and vertical orientation.
- Crosshair overlay shows live X/Y coordinates as you move the mouse.
Steps to measure with the pixel ruler
Click and drag anywhere in the ruler area above to place the ruler. Drag the green handle at one end to resize it, and drag the ruler body to reposition it. Switch between px, cm, and in using the unit buttons, and toggle Horizontal or Vertical mode as needed. The stats bar shows width, height, and position in real time.
FAQ
How accurate is the pixel ruler?
Pixel measurements are exact — 1 CSS pixel = 1 screen pixel at 100% zoom. Centimetre and inch readings start as an estimate based on your screen's DPI and are marked with ≈. For exact cm and inch readings, run the optional 10-second card calibration — once saved, the ≈ disappears and the tool uses your screen's true pixels-per-millimetre.
How does calibrating with a bank card work?
Every bank and ID card follows the same international standard size: 85.60 × 53.98 mm. Hold any card upright against your screen and drag the green outline until it matches the card exactly — the tool then knows precisely how many pixels one millimetre spans on your screen. No card handy? Enter any known length in millimetres instead. Calibration only affects cm and inch readings — pixels are always exact — and you can reset it at any time.
What is DPI and why does it matter?
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. Browsers can only estimate this value, which is why uncalibrated cm and inch readings are marked ≈ — calibrating with a card replaces the estimate with a measured value.
Does it work on touchscreens?
Yes. The ruler supports both mouse and touch input. On phones it starts in vertical mode with a taller ruler area, since portrait screens have more room top to bottom. Use one finger to drag and place the ruler, then drag the handle at the end to resize it.
Is the pixel ruler free and does it send my screen data anywhere?
The tool is completely free with no sign-up required. All measurements happen locally in your browser using JavaScript — no screen data, coordinates, or usage information is ever sent to any server. Your calibration is saved only in your browser's local storage on your device.