An on-screen pixel ruler is a digital measurement tool that lets you measure distances, widths, and heights directly on your screen in pixels (px). It's widely used by designers, developers, and QA testers to verify element dimensions, check spacing, and ensure pixel-perfect alignment in web pages and UI designs. Unlike physical rulers, it measures the actual rendered pixels on your display.

Rectangle Mode: Click and drag on the canvas to draw a measurement rectangle. The width (W) and height (H) in pixels will appear in real-time.

Distance Mode: Click to set the starting point, then move your mouse and click again to set the endpoint. The tool displays the straight-line distance, as well as the horizontal (ΔX) and vertical (ΔY) offsets in pixels.

Pro Tip: Upload a screenshot or paste an image (Ctrl+V) to measure specific UI elements within it.

Yes! You can upload images (PNG, JPG, GIF, WebP) using the Upload button, or simply paste an image from your clipboard (Ctrl+V / Cmd+V). You can also drag and drop an image file directly onto the canvas. The image will display at its actual pixel dimensions for accurate 1:1 measurement.

Pixels are the smallest addressable units on a digital display. The physical size of a pixel depends on the screen's PPI (Pixels Per Inch) or pixel density. For example, a 96 PPI display renders 96 pixels per inch, so 96px ≈ 1 inch. Retina/HiDPI displays may have 192+ PPI. This tool measures in CSS/reference pixels as rendered in the browser, which is ideal for web development and UI design work.

• UI/UX Design: Verify spacing, padding, and element sizes in mockups.
• Front-End Development: Check if implemented layouts match design specs.
• QA Testing: Detect layout shifts and pixel inconsistencies across browsers.
• Graphic Design: Measure objects in raster images or screenshots.
• Responsive Testing: Compare element dimensions at different breakpoints.

This tool measures at 1-pixel precision using the browser's native rendering engine. For uploaded images displayed at 100% scale (1:1 pixel mapping), measurements are exact. The built-in rulers with tick marks at 10px, 50px, and 100px intervals help you visually verify and align measurements. Note that browser zoom levels can affect perceived sizes — use at 100% zoom for accurate results.

• R — Switch to Rectangle measurement mode
• D — Switch to Distance measurement mode
• Delete or Backspace — Clear current measurement
• Ctrl+V / Cmd+V — Paste image from clipboard
• Escape — Cancel ongoing measurement