Cursor Position
0, 0
Click and drag anywhere to measure distances. Rulers show pixel positions.

About This Tool

Measure pixel distances directly on your screen. A virtual ruler overlay for designers and developers who need to verify element sizes, spacing, and alignment without opening design tools.

How to Use

  1. The ruler appears on screen with pixel markings.
  2. Drag or position it over the area you want to measure.
  3. Read the pixel measurement from the ruler scale.

Frequently Asked Questions

How accurate is the on-screen pixel ruler?

It measures CSS pixels accurately. On high-DPI (Retina) displays, CSS pixels may differ from physical pixels, but web layouts use CSS pixels.

Can I measure both horizontal and vertical distances?

Yes. The ruler can be oriented in either direction to measure widths, heights, and spacing between elements.