Uwarp

Drag on the stage to measure

Drag to draw a box. The rulers and the readout use CSS pixels.

Tick marks are CSS pixels. A 2× screen still reports CSS pixels, which is what layout code uses.

Help Us Improve

—

(—)

Measure CSS pixels on screen

Measure a box in CSS pixels. Drag on the stage, read width and height, and copy the size — free, no sign-in.

What is a pixel ruler?

A pixel ruler measures a region in CSS pixels. Drag a box on the stage, read width and height, and copy them as CSS. The ticks are a guide for the same unit. This page does not overlay other applications, and it does not convert CSS pixels into physical millimeters.

Pixel ruler controls

Measure a rectangle in CSS pixels.

  1. Drag to measure: Draw a box on the stage. Width and height update while you drag.

  2. Horizontal and vertical ticks: Rulers mark every 10 CSS pixels and label every 50.

  3. Copy CSS size: Copy width and height as CSS declarations.

  4. Origin readout: See where the box starts, in CSS pixels from the stage’s top left.

How to use the pixel ruler

Measure a region in the browser.

  1. Open the stage

    The ruled area is the only surface this tool measures.

  2. Drag a box

    Press and drag. Release to keep the measurement.

  3. Read or copy

    Use the width × height line, or Copy CSS size.

  4. Clear

    Clear removes the box so you can measure again.

Tips for on-screen measuring

Keep the number comparable to your CSS.
  • 01

    Reset browser zoom

    Measure at 100% zoom when you want the number to match an unscaled layout.

  • 02

    Use CSS pixels in code

    Do not multiply the readout by devicePixelRatio unless you are counting bitmap pixels.

  • 03

    Measure one box at a time

    Clear the previous box before the next drag so the readout matches the new region.

When a pixel ruler helps

Layout checks that need a CSS-pixel size.

  1. Spacing checks: Compare a gap you see on screen with the padding you plan to write.

  2. Component sizing: Rough out a card or button size before opening a stylesheet.

  3. Screenshot sanity checks: Hold a capture next to the stage and match a region’s CSS-pixel size.

Why measure here

A browser ruler for CSS pixels.

  • No sign-in

    Open the page and drag. Nothing is uploaded.

  • Free

    No account and no watermark on the readout.

  • Matches layout code

    The unit is the CSS pixel, which is what width and height in CSS mean.

Technical details

How the measurement is calculated.
Unit
CSS pixels from pointer positions relative to the stage.
Ticks
Minor ticks every 10 CSS pixels. Labels every 50.
Rounding
Width, height, and origin are rounded to the nearest CSS pixel.
Scope
The stage only. Other windows and design files are not measured.

Sources & References

References for CSS pixels and device pixel ratio.
  • “The CSS pixel is synonymous with the CSS unit of absolute length px — which is normatively defined as being exactly 1/96th of 1 CSS inch.”
    — MDN Web Docs — CSS pixel

    CSS pixel: This ruler reports CSS pixels, the unit used by width, height, and layout coordinates in the browser. developer.mozilla.org/en-US/docs/Glossary/CSS_pixel

  • “The devicePixelRatio of Window interface returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.”
    — MDN Web Docs — Window.devicePixelRatio

    devicePixelRatio: A high-density screen can show several device pixels per CSS pixel. This tool does not multiply by that ratio. developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

Frequently Asked Questions

Quick answers about this tool—open a question to read more.