Pixel Ruler

Use Pixel Ruler tool to measure pixels on any web page: an on screen ruler for element size, spacing and padding.

Pixel Ruler puts a ruler on the screen and lets you measure anything in the browser. Click the toolbar icon, drag the mouse across the layout, and read the exact distance in CSS pixels. Hover an element and you get its width, height, padding and the gaps to the blocks around it. The numbers match DevTools, because the extension reads the same CSS pixels the browser uses to draw the page. No panel to open, no screenshot to export, no arithmetic. Just a screen ruler on top of the site you are already looking at. One overlay, nothing to switch between: 📏 Press and drag to measure the distance between any two points on the page. 📏 Point at an element and see its size, padding and the offsets to its neighbours. 📏 Drop vertical and horizontal guides and align blocks against them. You always have a ruler on screen for reference, and one key copies the result to the clipboard together with the CSS selector of the element under the pointer. How to start, in three steps: 1. Install the extension and pin it to the toolbar. 2. Open the page you are working on and click the icon. 3. Drag, hover, measure — press Esc twice when you are done. Front-end developers use it to check a layout against a mockup. Designers use it as a page ruler when the handoff file is already out of date. QA engineers file a bug with a real number instead of "the button looks a bit low". Anyone who needs a fast pixel measurement on a live site gets it in two clicks. What this web ruler gives you: - the distance between any two points, in pixels - width and height of any element on the page - padding, margins and the gaps between neighbours - offsets from an element to the blocks around it - scales along the top and left edges of the window - the tag, classes and CSS selector of the element you measured - reusable guides for checking alignment Keyboard control keeps the pointer steady: → Shift locks the measurement to a horizontal or vertical axis → Arrow keys nudge the current point by exactly 1 px → Esc clears the current measurement, a second Esc gives the page back → One shortcut copies the result to the clipboard Install it once and you have the same pixel ruler Windows, Linux and ChromeOS users run, and the same pixel ruler Mac users run, because the tool lives in the browser, not in the operating system. There is no pixel ruler download to hunt for, no installer and no admin rights: the extension arrives from the Chrome Web Store in one click. It is a free pixel ruler at launch, with every feature open to everyone. A screen ruler app that opens in a separate window always measures the wrong thing once the page scrolls. This pixel ruler app is drawn inside the tab and scrolls with the content. This is a pixel ruler online: it works on the live page, on a staging server, on a client site, behind a login. A desktop pixel ruler measuring a static picture of a window cannot do that. Need to check an illustration or a logo? Use it as a pixel ruler image checker — hover the picture and read its rendered size, which is often not the size in the source file. Questions and answers Q: How to measure pixels on screen without opening DevTools? A: Click the icon and drag. The overlay sits above the page, so you measure what you actually see, including hover states that disappear when a panel steals focus. Q: Screen pixel ruler, pixel screen ruler, px ruler, pixelruler — which one is this? A: All of them. The tool is the same, only the search phrase changes. Q: Can it measure in centimetres or inches? A: No. It is a pixel ruler tool and it reports CSS pixels only, the unit you write in your stylesheet. Q: Does it work everywhere? A: On regular websites, yes. Chrome system pages, the built-in PDF viewer and the inside of cross-origin iframes are closed to every extension, this one included. Q: What data does it collect? A: None. Zero network requests, no account, no sign-up. It asks for no scary permission at install and touches a page only after you click the icon. Old habits are slower and less exact: holding a plastic ruler on computer screen glass, or counting pixels in a screenshot. A ruler for computer screen work has to live inside the browser, redraw when the layout reflows and speak the same units as the code. That is what this ruler screen overlay does, and why a website pixel ruler beats a ruler for screen images pasted into a graphics editor. The listing is available in 52 languages, so a web pixel ruler is one search away in yours. Install it, measure pixels on the next page you open, and keep the on screen ruler one click away for the rest of the day.