Pixel Ruler

A pixel ruler that never needs a tape measure: click two points and read the exact distance in pixels. This online ruler also shows px positions for your cursor, so UI engineers can verify spacing, icon sizes, and layout gutters without opening a design tool.

How the pixel ruler works

Choose px as the unit and every tick on the edge rulers switches to pixel steps — major marks every 100px, medium marks every 50px, fine ticks every 10px. Press M to activate the pixel ruler measure mode, click two points, and the readout gives the dx, dy, and diagonal distance in px. The cursor readout always shows live X/Y pixel coordinates.

Pixel ruler vs calibrated units

The pixel ruler is always exact, because pixels are your screen’s native unit: one CSS pixel is one unit, no calibration required. Switching to cm, mm, or inches uses your saved PPI calibration, so the same online ruler can output both px and real-world units for the same measurement.

What designers build with a pixel ruler

Common uses: checking that a button is 44px tall, verifying 8px spacing grids, comparing a live build against a mockup, and measuring icon hit areas. Anywhere you would reach for a design inspector, this pixel ruler does the job in one click.

FAQ