Page Ruler - Measure Pixels on Screen

Measure any element on a webpage in pixels. Drag to measure areas, hover to see dimensions. Free ruler for designers.

Page Ruler lets you measure any element or area on a webpage in pixels. Drag to draw a ruler across any region, inspect element dimensions, add guidelines, and copy measurements — all the tools you need for pixel-perfect web design and development. **Key Features** - **Drag-to-Measure** — Click and drag anywhere on the page to draw a measurement box and see the width, height, and position in pixels. - **Element Inspector Mode** — Hover over any HTML element to instantly see its exact dimensions and bounding box. - **Guidelines** — Add horizontal and vertical guidelines to align and compare elements across the page. - **Color Customization** — Change the ruler and guideline colors to ensure visibility against any background. - **Copy Dimensions** — Copy measured width, height, top, left, and other position values to your clipboard with one click. - **Pixel-Perfect Accuracy** — All measurements are calculated directly from the page's rendered layout for precise results. **How to Use** 1. Click the Page Ruler icon in the Chrome toolbar to activate measurement mode. 2. Click and drag on the page to measure any rectangular area. 3. Switch to Element Inspector mode to hover and auto-detect element boundaries. 4. Add guidelines by clicking on the ruler edges. 5. Click dimensions to copy values to your clipboard.