What is an online pixel ruler?
An online pixel ruler is an on-screen measuring aid that shows sizes in pixels rather than centimetres or inches. This one is a blue box you resize by dragging its bottom-right corner. As you drag, a readout underneath updates live, for example "Width: 200px · Height: 150px", and a grid with a line every 50 pixels sits behind it for reference.
Using the ruler
- Find the small resize grip at the bottom-right corner of the blue box.
- Drag it. The box can be made as small as 20 × 20 pixels.
- Read the width and height below the grid. Values are rounded to whole pixels.
- Count grid lines for a quick estimate: every square of the background is 50 × 50 pixels.
The box starts at 200 × 150 and is anchored 24 pixels in from the top and left of the grid. It can't be dragged to a new position, only resized. The grid area is 320 pixels tall, so a box taller than roughly 290 pixels runs past the visible area, although the readout keeps counting.
What it's good for
The honest answer is: getting a feel for sizes, rather than precision measurement of other apps.
- Visualising a dimension. How big is a 300 × 250 ad slot, a 728-pixel-wide banner or a 1080-pixel square on your current screen? Drag the box to that size and look.
- Checking a design mock-up by eye. Put an image viewer window beside the browser and compare the box against the element you care about.
- Sanity-checking sizes in CSS. If a stylesheet says
width: 320px, you can see what that looks like before writing it.
For exact measurements of elements on a web page, your browser's developer tools are better: they show every element's box size to a fraction of a pixel. For pixel sizes inside an image file, the image resizer and any image editor report the true dimensions.
CSS pixels versus device pixels
The ruler measures in CSS pixels, because that's what the page itself is laid out in. The W3C CSS Values and Units specification defines the CSS pixel as a reference unit, not a fixed dot on your screen. How many physical pixels one CSS pixel covers is reported by window.devicePixelRatio, and it depends on your display's density and your browser zoom.
| Device pixel ratio | Typical situation | 200 CSS px box covers |
|---|---|---|
| 1 | Standard monitor at 100% zoom | 200 physical pixels |
| 1.25 | Windows display scaling at 125% | 250 physical pixels |
| 1.5 | 150% scaling, or 150% browser zoom | 300 physical pixels |
| 2 | Most Retina Macs and many laptops | 400 physical pixels |
| 3 | Many recent phones | 600 physical pixels |
So if you take a screenshot of the box on a Retina screen, it'll be twice as many pixels wide in the screenshot as the readout says. That isn't an error; the screenshot captures physical pixels. You can see your own ratio, along with your screen and viewport size, on What is my browser.
Browser zoom matters too. Press Ctrl and + (or Cmd and + on a Mac) and the box looks bigger while the readout stays the same, because zooming changes the device pixel ratio, not the CSS size. Reset zoom to 100% before comparing the box with anything outside the browser.
Can I measure in centimetres or inches?
Not reliably. CSS defines 1 inch as 96 CSS pixels, but on screens that's a nominal inch. The real physical size depends on the monitor's pixel density, so a "96-pixel inch" might measure noticeably more or less with a tape measure. If you need physical dimensions, measure on paper or use the display's published pixel density to convert.
Working with relative CSS units? The REM to PX converter translates rem values into pixels, which you can then drag out here to see.
Limitations to keep in mind
The resize grip comes from the CSS resize property. Desktop browsers support it well; on many phones and tablets it doesn't appear, so the box can't be resized by touch. The box's minimum size is 20 × 20 pixels, the readout rounds to whole pixels, and nothing is saved between visits. The tool runs entirely in the page: there's no input to upload and nothing leaves your browser.
To see how a whole site rearranges itself at phone, tablet and desktop widths, the screen resolution tester loads it in four sizes at once.
Last updated