Pixel Ruler

What Is the Pixel Ruler?

The Pixel Ruler is a free, browser-based tool that reports your mouse cursor position and your device pixel ratio. It shows Mouse X, Mouse Y, and Device Pixel Ratio in the workspace above. The coordinates are in CSS pixels relative to the viewport, which makes the tool useful for a quick check of where the cursor is on the page and how many device pixels correspond to one CSS pixel on your display.

Everything runs in your browser. You do not need to install software, create an account, or upload anything.

How to Use the Pixel Ruler

1. Open this page. The workspace shows Mouse X, Mouse Y, and Device Pixel Ratio.
2. Move your mouse over the page. Mouse X and Mouse Y should update as the cursor moves.
3. Read Device Pixel Ratio to see the scaling between CSS pixels and device pixels. A value of 1 means one device pixel per CSS pixel; a value of 2 means two device pixels per CSS pixel in each direction.
4. Click Clear if you want to reset the workspace display.

Worked Example

In an observed test on this page, the workspace did not populate: on page load it showed Mouse X “–”, Mouse Y “–”, and Device Pixel Ratio “–”. After hovering over the Clear button, the three values were still “–”. That is the actual observed output, and it is why the Limitations section below says the tool cannot currently be relied on for measurements in this browser.

When the tool works as intended, you would expect a result such as Mouse X 420, Mouse Y 180, and Device Pixel Ratio 1, meaning the cursor was 420 CSS pixels from the left edge and 180 CSS pixels from the top edge of the viewport on a display with no extra pixel scaling. Do not treat those illustrative numbers as a measurement from this page, because the observed output was dashes.

Limitations

• Observed bug: In testing, all three workspace values stayed “–” and did not update on hover. Until this is fixed, do not rely on this tool for real measurements.
• This is a cursor-position readout, not a drag-to-measure overlay. It does not let you click and drag between two points to measure the distance between them, and it does not draw a ruler over other pages or screenshots.
• Coordinates are viewport-relative. Scrolling the page or resizing the browser window changes the numbers for the same on-screen content.
• Mouse coordinates do not update on touch-only devices in the same way, because there is no hover cursor.
• Device Pixel Ratio describes display scaling, not screen size. It does not tell you the screen width, height, or resolution.

Frequently Asked Questions

What do Mouse X and Mouse Y measure?

They report the cursor position in CSS pixels from the left edge (X) and top edge (Y) of the browser viewport.

What does Device Pixel Ratio mean?

It is the ratio of device pixels to CSS pixels. On a standard display it is often 1; on high-density (Retina-style) displays it is often 2 or higher.

Why does the workspace show “–”?

Dashes mean no value has been reported yet. In the observed test the values never populated, which is a bug rather than normal behavior. Reloading the page or trying another browser may help, but the tool should not be trusted for measurements until the values update on mouse movement.

Can I measure the distance between two points?

No. This tool reports the current cursor position only. It has no click-and-drag distance mode, so measure a single point at a time or use a screenshot tool with a ruler for two-point distances.

Summary

The Pixel Ruler is meant to be a quick, private way to read cursor coordinates and device pixel ratio. It is simple and free, but in the observed test its workspace did not populate, so verify that the values update before using it for any real layout or design check.