Measure Pixels on Screen

Overview

Measure Pixels on Screen is a handy ruler tool for your browser. It lets you measure the width, height, and spacing of anything on a web page — perfect for designers, developers, and anyone who needs exact pixel values.

Two measuring modes — draw a box by hand, or let the tool auto-detect page elements
Built-in magnifier for pixel-perfect positioning
Color picker that grabs the exact color of any pixel
CSS export to copy an element's styling in one click
History that saves your measurements with notes
Multiple units — px, cm, inch, pt, rem
Screenshots that keep your measurement boxes in the image

Getting Started

Install the extension from the Chrome Web Store.
Click the extension icon in your browser toolbar to start. A small floating panel appears on the page.
Choose a mode from the panel: Smart (the default, auto-detects elements) or Manual (you draw the box).
Measure anything on the page. When you're done, press Esc or click the extension icon again to stop.

Features

Measurement Modes

Smart Mode	Move your mouse over any element and its edges light up automatically, showing its width and height. Press `F` to lock one element as a reference, then hover over another element to see the distance between them.
Manual Mode	Click and drag anywhere on the page to draw a box. The exact width and height of the selected area are shown in real time.

Tools

Magnifier	A circular zoom lens follows your cursor, magnifying the area underneath so you can place your box on the exact pixel. Turn it on or off in Settings.
Color Picker	Press `P` to enter pick mode, then click anywhere on the page to grab that pixel's color. The HEX code is copied to your clipboard automatically.
CSS Export	In Smart mode, hover over an element and press `E` to copy its styling code (size, colors, fonts, spacing). Paste it straight into your own stylesheet.
Screenshot	Press `X` to capture the page as a PNG file. Your measurement boxes stay visible in the image, while the panel and magnifier are hidden — so you get a clean shot with your measurements. Press `Shift + X` to copy the screenshot to your clipboard instead.
Grid	Overlay an adjustable pixel grid on the page to help with alignment. Change its size and color in Settings.

Data & Units

History	Press `S` to save the current measurement. Open the History tab to review past measurements, add notes, copy values, or delete entries.
Units	Switch between pixels (px), centimeters (cm), inches (in), points (pt), and root em (rem) in Settings. All measurements update instantly.
Panel Size	The floating panel comes in three sizes (small, medium, large). Pick the one that fits your screen in Settings, or minimize it to get it out of the way.

Keyboard Shortcuts

Every shortcut can be customized in the panel under Settings → Shortcuts. The defaults are:

Key	Action
`Esc`	Stop measuring / exit the current tool
`P`	Turn the color picker on or off
`C`	Copy the current width × height
`D`	Clear the current measurement box
`F`	Lock the hovered element as a reference (Smart mode)
`S`	Save the current measurement to history
`X`	Take a screenshot (download PNG)
`Shift + X`	Copy the screenshot to the clipboard
`E`	Copy the hovered element's CSS (Smart mode)
`Arrow keys`	Nudge the measurement box by 1 pixel (Manual mode)
`Shift + Arrow`	Nudge the box by 10 pixels
`A + Arrow`	Move the whole box without changing its size (Manual mode)

Frequently Asked Questions

How do I start and stop measuring?

Click the extension icon in your toolbar to turn measuring on. A floating panel appears and you can start measuring right away. To stop, click the icon again or press Esc.

The page doesn't respond when I click while measuring — is that normal?

Yes. While measuring is on, clicks on the page are paused so you don't accidentally trigger buttons or links while placing your box. Press Esc to exit measuring, and the page will respond to clicks as usual.

How do I measure the distance between two elements?

Switch to Smart mode, hover over the first element, and press F to lock it as a reference (it gets a red outline). Then move your mouse over the second element — the distance between them is shown automatically.

Can I change the keyboard shortcuts?

Yes. Open the panel, go to Settings → Shortcuts, and click any key to set a new one. You can also restore all defaults with one click.

What does the screenshot capture?

The screenshot captures the visible page with your measurement boxes kept visible, but the panel, magnifier, grid, and mouse cursor are hidden — so the image is clean and shows exactly what you measured.

The extension isn't working or isn't responding. What should I do?

First, click the extension icon once to restart it, or reload the page. If it still doesn't work, please let us know — describe what you were doing and what happened, and send it to the developer email below. Your feedback helps us find and fix the problem.

Not working as expected? Email the developer at thetoolsdev@gmail.com