Inspect and Measure Anything on Any Web Page

See Sizes, Spacing, and Styles

Hover over any element to see sizes, spacing, and styles. Click to measure distances and extract properties.

View sizes, margins, paddings, tag names, IDs, and classes by hovering over any element on the page.

Select an element to measure pixel distances between it and other elements on the page.

View and copy the computed CSS properties of any selected element directly to your clipboard.

Horizontal and vertical guides with crosshair for precise measurements across the viewport.

Sample and copy colors from anywhere on the page using the built-in eyedropper tool.

Navigate element hierarchy with keyboard shortcuts to select parent or child elements.

Capture cropped screenshots of selected elements with margins and measurements included.

Pro

Get lifetime access to advanced features like responsive mode, accessibility checks, and asset extraction.

Overlay a customizable column grid for checking design alignment and spacing.

Detailed element properties on hover including position, size, rendered font, and colors.

Automatically detect and highlight WCAG contrast failures with actionable recommendations.

Test designs across different device viewports with an interactive device emulator and custom dimensions.

Interactive breakdown of multi-layer box shadows with exploded view of each shadow component.

Visualize CSS animation timing curves and copy animation CSS properties.

Extract and download images, SVGs, and vector assets directly from any webpage.

Extract and copy color palettes from selected elements with hex, RGB, and HSL values.

Analyze and extract all typography styles used in your selection.

Find and highlight elements using CSS selectors to quickly locate specific elements.

Reveal the underlying structure of the page by outlining all elements at once.

Identify the frameworks, libraries, and tools powering any website with over 150 technologies supported.

Download Screen Ruler and start measuring instantly