HomeDevOnline Ruler
Web tools

Online Ruler

Measure pixel distances on screen with an online ruler. Capture screenshots and measure elements in pixels.

Pixel ruler specification

Version 1.0.0 · Last reviewed 2026-07-28

Definition
A pixel ruler measures on-screen distances in CSS pixels to help align layouts and check spacing.
What it calculates
On-screen length in CSS pixels between points or along a guide.
Inputs
  • Pointer positions on the ruler / canvas
Outputs
  • Distance in px
Formula
distance = |x2 − x1| or √((x2−x1)² + (y2−y1)²) in CSS pixels

The Online Pixel Ruler measures distances between two points on a screenshot in pixels. Useful for web designers checking element sizes, spacing, and layout dimensions.

How to use

Windows

  1. Capture the screen or window: press PrtScn (full screen) or Alt + PrtScn (active window)
  2. Paste into the ruler page: press Ctrl + V
  3. Click on two pixels to measure the distance between them

Mac

  1. Capture the screen: press ⌘ Command + Shift + 3 (full screen) or ⌘ Command + Shift + 4 (selection)
  2. Paste into the ruler page: press ⌘ Command + V
  3. Click on two pixels to get the length in pixels

Use cases

  • Measure button widths and heights
  • Check spacing between UI elements
  • Verify image dimensions on a live page
  • Compare design mockup sizes to implementation

Tips

  • Capture at 100% browser zoom for accurate measurements
  • Use Alt + PrtScn to capture only the browser window
  • For Retina displays, note that CSS pixels may differ from physical pixels
Assumptions
  • Measurements use CSS pixels for the current viewport zoom.
  • Local tool; no upload.
Units
  • px (CSS pixels)
Boundary conditions
  • Browser zoom changes visual size relative to device pixels.
Example
Drag 200 CSS pixels horizontally → readout 200 px
Validation cases
  • Horizontal span 100px → 100
Sources
  • CSS Values and Units — px
Last reviewed
2026-07-28
Calculation version
1.0.0
→ Window size › → Screen resolution ›

Frequently asked questions

Key distinctions behind the tool.

Is a CSS pixel the same as a device pixel?

Not always. On high-DPI screens, multiple device pixels map to one CSS pixel.

Does zoom affect the reading?

Yes—measurements follow the laid-out CSS pixel grid at the current zoom.