Screen Ruler
Inspect elements, measure distances, extract assets, and validate designs. Built for developers and designers.
Add to ChromeUsed by 50,000+ developers and designers worldwide.
View sizes, margins, paddings, tag names, IDs, and classes by hovering over any element.
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.
Automatically detect and highlight WCAG contrast failures with actionable recommendations.
Pause inspection, keyboard shortcuts, dark mode support, and continuous updates.
Perfect for web design. Shows properties, elements, measurements, containers and much much more. I love this app so much. Saved me hours of work and guess work.
Chrome Web Store Review
One-time purchase · 30-day money-back guarantee · Regional pricing available
Extract and download images, SVGs, and vector assets directly from any webpage.
Test designs across different device viewports with an interactive device emulator and custom dimensions.
Detailed element properties on hover including position, size, rendered font, and colors.
Extract and copy color palettes from selected elements with hex, RGB, and HSL values.
Analyze and extract all typography styles used in your selection.
Identify the frameworks, libraries, and tools powering any website with over 150 technologies supported.
Overlay a customizable column grid for checking design alignment and spacing.
Interactive breakdown of multi-layer box shadows with exploded view of each shadow component.
Visualize CSS animation timing curves and copy animation CSS properties.
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.
Instantly convert any element's computed styles into Tailwind utility classes.
View the CSS rules from stylesheets that apply to any element, grouped by source file.
Visualize CSS transitions and timing function curves alongside animations.
Inspect HTML5 Canvas elements. View dimensions, context types, and extract color palettes.