Made to measure. Built for everything else.
Screen Ruler is the perfect companion for web developers and designers. See sizes, distances, margins and paddings of any element on any web page.
Screen Ruler displays element dimensions, margins, and paddings on hover, and includes page rulers with horizontal and vertical guides plus a crosshair for precise alignment checks. Parent/child selection shortcuts and responsive resizing help developers spot layout problems quickly.
Screen Ruler allows designers to hover over any web element to instantly view sizes, margins, paddings, tag names, IDs, and classes. Users can select elements to measure distances between them and view computed CSS, enabling precise verification that implementation matches design intent.
The extension provides computed CSS inspection with a one-click copy-to-clipboard feature. PRO tier adds color extraction with hex, RGB, and HSL values, plus typography analysis, allowing developers to quickly harvest styling information from any webpage.
The extension automatically detects and highlights WCAG contrast failures in selected elements with actionable recommendations, helping developers ensure accessible color choices without leaving the browser.
PRO tier includes Responsive Mode with an interactive device emulator and custom dimension support, allowing designers to validate layouts across different screen sizes without manual browser resizing.