Hi Product Hunt 👋, I'm the creator of Screen Ruler, created out of necessity and I'm excited to share it with my fellow designers and developers. Screen Ruler is the perfect companion for web developers and designers. Once activated, Screen Ruler allows you to view the sizes, margins, paddings, tag names, IDs, and classes simply by hovering over any element. Features: - Measure the pixel size of any element. - Measure the pixel distance between any two elements. - HTML tag names, class names and IDs. - Parent/child selection shortcuts. - Responsive selections resize with your browser window. - Plays nicely with CSS transitions. - Access from the context menu. - Works on any web page. Screen Ruler PRO Screen Ruler also offers a PRO tier which unlocks additional features which requires a one-off payment for lifetime access. - Quick Screenshots: Save a screenshot of the parts of the web page that is currently highlighted. This is perfect for documenting issues, or attaching to tickets. - Element Inspect: See element properties and CSS in the browser sidebar. When you select an element, the side bar will be revealed allowing you to see the computed CSS organized by the properties that really matter. Includes pseudo-elements. If you decide to give it a try, I'd be over the moon for any ratings, reviews, feedback, or bright ideas. Thanks a bunch – can't wait to hear what you think!

Yesterday I was looking for a tool like this. Thank You!

All the best for the launch @myster_violets

FINALLY!!! Figma rulers on the web!! 😍 Thanks so much for this!!

Comment Deleted

This is quite handy. What I've noticed is that this does not work for elements inside an iframe or shadow dom yet.

Looks cool, Congratulations on your launch Screen Ruler - for Google Chrome