PixelProof — Pixel Ruler, Guides & Measure

A pixel ruler for the browser: drop guides, measure in CSS pixels, and snap to element edges to check a build against its mockup.

PixelProof is a pixel ruler for developers and designers who need to check a build against its mockup, pixel by pixel, without opening dev tools. Drop draggable guides, measure lines and boxes in exact CSS pixels, and snap to the edges of any element on the page. Whether you're QA-ing a pull request, comparing a build to a Figma mockup, or just eyeballing spacing on your own site, PixelProof turns any webpage into a ruler. FEATURES - Guides: drop full-width or full-height guides and drag them to test alignment - Measure: drag a line or box and read the exact width, height, and position in CSS pixels - Snap to edges: draw near an element and lock to its exact boundary, so a box drawn roughly around a card reports the card's true size - Gap readouts: see the spacing between a guide and its nearest neighbor as you drag - Keyboard-first: nudge selections 1px (10px with Shift), copy any measurement with Ctrl/Cmd+C, toggle the whole overlay with Alt+Shift+R - Everything is draggable: resize boxes from eight handles, drag line endpoints, slide guides along their axis All readings are CSS pixels, the same units as your mockup, so they hold up on retina displays and at any browser zoom level. PixelProof runs entirely in your browser and does not collect, store, or transmit any data. Free and open source: https://github.com/nagarsuresh/pixelproof