Measure sizes, distances, margins and paddings of any element on any web page.
Turn on the "Inspect" mode and when you move your mouse over an element, you'll see a list of common CSS properties organized by type.
When you make a selection by clicking on an element, open the side panel to see a set of advanced properties. Includes box model, css, colors, assets and more.
See all colors contained within the current selection as HEX, RGB or HSL. Supports text colors, background colors and color stops contained within gradients.
See all the assets within the current selection and download them with a single click. Supports all common image types including SVG.
Toggle a layout grid overlay on top of your site. Makes designing in the browser a breeze.
Don't waste any time messing with screenshots. Screenshots taken with Screen Ruler are automatically cropped to the size of your selection/highlights.
