On-Screen Pixel Ruler

Measure distances in pixels, centimeters, or inches. Drag to measure, add guidelines, and calibrate to your screen DPI.

Last reviewed: April 2026
Reviewed by , software engineer · last updated April 2026

New to this tool? Click here for instructions

Drag inside the ruler area to measure a region. Click rulers to add guidelines at that position.
Drag anywhere in the ruler area to measure a distance.

Quick Answer

A pixel ruler is an on-screen measuring tool for checking distances and element sizes in pixels. Use it to measure spacing, dimensions, and alignment while designing or debugging a layout. Drag to measure any region above. It is handy for matching a design mockup or auditing padding and margins without opening browser dev tools.

How to Use the On-Screen Pixel Ruler

The On-Screen Pixel Ruler is a free online tool that allows you to measure distances on your screen. You can measure in pixels, centimeters, or inches. The tool also includes guidelines that you can add to help with layout alignment.

When to Use the Tool in Real Workflows

The On-Screen Pixel Ruler is useful for designers, developers, and anyone who needs to measure distances on their screen. It is especially useful when designing websites, creating graphics, or debugging layout issues.

How It Works

The On-Screen Pixel Ruler works by overlaying a ruler on your screen. You can measure distances by clicking and dragging anywhere in the ruler area. The tool also includes guidelines that you can add to help with layout alignment.

Tips, Edge Cases, or Limitations

The On-Screen Pixel Ruler is a free tool, so there are no limitations in terms of functionality. However, it is a browser-based tool, so it may not work on all devices or browsers. When measuring in centimeters or inches, you may need to calibrate the tool to your screen's DPI for accurate measurements. The tool does not support measuring distances in other units, such as millimeters or yards.

Frequently Asked Questions

A pixel ruler is a tool used to measure distances on your screen. It is useful for designers, developers, and anyone who needs to measure distances on their screen.
To calibrate the ruler for accurate real-world measurements, you need to enter your monitor's DPI. Standard monitors are 96 DPI; MacBook Retina displays are 144x220 DPI; 4K monitors are 160+ DPI depending on screen size.
CSS pixels are the same unit used in all web CSS measurements. A CSS pixel is defined as 1/96th of an inch at 100% zoom. On standard monitors at normal zoom, one CSS pixel equals one physical pixel on screen. On high-DPI (Retina) displays, one CSS pixel maps to 2 or 3 physical pixels, which makes text and graphics look sharper but does not change the CSS pixel count.
To use the drag measurement feature, simply click and drag anywhere in the ruler area to draw a measurement rectangle. The status bar will show the width and height in real time.
Guidelines are fixed horizontal or vertical reference lines used to check alignment of multiple elements. You can add guidelines at fixed positions using the "+ H Guideline" or "+ V Guideline" buttons.

Quick reference

On-Screen Pixel Ruler Quick Reference
Feature Default Settings Custom Options Notes
Grid Mode 10px spacing Adjustable (2-50px) Snaps to grid lines
Measurement Tool Pixel units Switch to inches/cm Displays decimal precision
Zoom Level 100% scale 25-400% range Preserves aspect ratio
Color Options Red overlay Custom RGB values Transparency control
Snap Tolerance 2px radius 0-10px range Affects alignment accuracy
Overlay Transparency 50% opacity 10-90% range Optimal for layered content