Screen Ruler
Inspect and Measure Anything on Any Web Page
Trusted by 30,000+ developers and designers
See Sizes, Spacing, and Styles
Hover over any element to see sizes, spacing, and styles. Click to measure distances and extract properties.
Element Inspection
View sizes, margins, paddings, tag names, IDs, and classes by hovering over any element on the page.
Distance Measurement
Select an element to measure pixel distances between it and other elements on the page.
Computed CSS
View and copy the computed CSS properties of any selected element directly to your clipboard.
Page Rulers
Horizontal and vertical guides with crosshair for precise measurements across the viewport.
Color Picker
Sample and copy colors from anywhere on the page using the built-in eyedropper tool.
Parent/Child Selection
Navigate element hierarchy with keyboard shortcuts to select parent or child elements.
Join 30,000+ Developers and Designers
Join thousands of professionals who use Screen Ruler every day to build better websites.
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
PERFECT EXTENSION
Chrome Web Store Review
This is the best on-screen roulette/ruler available in the Chrome Store.
Chrome Web Store Review
Exactly what I was looking for. Excellent!
Chrome Web Store Review
A beautiful little tool. It also feels so light and snappy in the browser. It is so much more than a ruler. An invaluable piece of my workflow when designing sites. Great job 10/10
Chrome Web Store Review
Love it
Chrome Web Store Reviewe
Fast. Clear UI. No unnecessary bells and whistles. After 5 minutes I switched to the pro version. Great, fine tool.
Chrome Web Store Review
Awesome
Chrome Web Store Review
One of most useful front-end extensions, it worth each cent. I recommend it to every developers.
Chrome Web Store Review
This extension is incredible.
Chrome Web Store Review
Lovely! Just like Figma's rulers.
Chrome Web Store Review
Great tool! I am a Web developer. It's really useful for me.
Chrome Web Store Review
Unlock the Full Toolkit
Get lifetime access to advanced features like responsive mode, accessibility checks, and asset extraction.
Layout Grid Overlay
Overlay a customizable column grid for checking design alignment and spacing.
Element Screenshots
Capture cropped screenshots of selected elements with margins and measurements included.
Floating Inspector
Detailed element properties on hover including position, size, rendered font, and colors.
Accessibility Issues
Automatically detect and highlight WCAG contrast failures with actionable recommendations.
Responsive Mode
Test designs across different device viewports with an interactive device emulator and custom dimensions.
Box Shadow Visualization
Interactive breakdown of multi-layer box shadows with exploded view of each shadow component.
Animation Analysis
Visualize CSS animation timing curves and copy animation CSS properties.
Asset Extraction
Extract and download images, SVGs, and vector assets directly from any webpage.
Color Extraction
Extract and copy color palettes from selected elements with hex, RGB, and HSL values.
Typography Analysis
Analyze and extract all typography styles used in your selection.
CSS Selector Search
Find and highlight elements using CSS selectors to quickly locate specific elements.
X-Ray Mode
Reveal the underlying structure of the page by outlining all elements at once.
Technology Detection
Identify the frameworks, libraries, and tools powering any website with over 150 technologies supported.
Get Screen Ruler for Free
Download Screen Ruler and start measuring instantly