Pixel Ruler

About

📏 Pixel Ruler is a lightweight Chrome extension for measuring pixels, spacing, and alignment directly on webpages. Turn it on, drag across the page, and instantly check dimensions, positions, grid alignment, and layout spacing with custom colours and multiple measurement boxes.

--------

📐 Pixel Ruler helps designers, developers, and anyone working with visual layouts measure and inspect webpages in pixels. It adds a simple on-screen ruler overlay that lets you click and drag to draw a measurement box over any normal webpage.

🎯 Use it to check element sizes, spacing, alignment, padding, margins, image dimensions, component placement, and layout consistency. It is useful for comparing sections of a page, checking whether UI elements line up, measuring gaps between components, and reviewing visual polish without opening developer tools or taking screenshots.

🖱️ Click the extension icon to enable ruler mode, then drag on the page to measure an area. The ruler displays useful pixel values including X/Y position, width, height, and end coordinates. Hold Shift while dragging to keep existing measurements and add another section. Press Escape to close the ruler.

🎨 Pixel Ruler includes a floating settings panel where you can change the highlight colour, choose a custom colour, toggle measurement labels, enable or disable horizontal and vertical grid lines, and adjust grid opacity. The panel can be moved or collapsed when it gets in the way, so you can keep measuring and checking alignment without interrupting your workflow.