ScreenRuler

About

ScreenRuler -- Pixel-Perfect Measurement for Any Webpage

Stop guessing pixel distances. ScreenRuler gives designers and developers an instant measurement overlay on any webpage with three precision tools built in.

Features

Ruler Tool -- Click and drag to measure any distance on the page. Shows width x height in pixels with visual dimension lines. Hold Shift to lock measurements to horizontal or vertical axes.

Color Picker -- Hover over any element to see its color in hex, RGB, and HSL. Click to instantly copy the hex code to your clipboard. A magnifier loupe follows your cursor for precision.

Element Inspector -- Hover over any element to see its bounding box, dimensions, padding, and margin visualized with color-coded overlays. Click to copy the CSS dimensions.

Quick Access

Activate tools from the popup or use keyboard shortcuts while the overlay is active:
• R = Ruler
• C = Color Picker
• I = Element Inspector
• Shift = Constrain ruler to horizontal/vertical
• Esc = Deactivate

Built for Speed

• Activates only when you need it -- zero impact when inactive
• Overlay cleans up completely when deactivated
• Lightweight -- no frameworks, no bloat
• Works on any webpage

Privacy First

All processing happens locally in your browser. No data collection. No analytics. No tracking. Period.

Who It's For

Front-end developers checking spacing and alignment. Designers verifying implementations match their mockups. QA engineers documenting visual bugs. Anyone who needs to measure things on screen.