Screen Ruler

Screen Ruler Pro — the measurement and inspection tool for people who build websites.

Measure anything. Inspect everything. Extract what you need.

Screen Ruler Pro is free to install from the Chrome Web Store

Core features:

• Measure distances, margins, and padding between any elements
• Navigate page structure with parent/child element selection
• View computed styles, fonts, colors, and layout properties
• Click to select elements and see comprehensive details
• Capture perfectly cropped screenshots of selected elements

Pro features (included with this license):

• Floating Inspector — see position, size, font, colors on hover
• Tailwind Conversion — get Tailwind classes from any element's styles
• Accessibility Checker — detect WCAG contrast failures with fix recommendations
• Responsive Mode — test across device viewports with custom dimensions
• Box Shadow Visualization — interactive breakdown of multi-layer shadows
• Animation Analysis — visualize timing curves, copy animation properties
• Transition Analysis — inspect transition properties and timing functions
• Asset Extraction — download images, SVGs, and vectors
• Color Extraction — grab palettes in hex, RGB, and HSL
• Typography Analysis — extract all font styles from your selection
• Layout Grid Overlay — customizable grid for alignment checks
• CSS Selector Search — find elements by selector
• X-Ray Mode — outline all elements to reveal page structure
• Technology Detection — detect frameworks and libraries

Perfect for:

Web developers, UI/UX designers, front-end teams, design agencies.

License:

3 activations per key. Team packages (5 or 10 seats) available. Personal/private use only — public sharing = deactivation.