Achieve Pixel-Perfect Web Designs
Get accurate distances and design specs on any web page, just like in your favorite design tool.
Handoff
Streamline your design handoff. Quickly verify layout accuracy and ensure pixel-perfect implementation on any web page.
'%3e%3cpath%20d='M18.0423%200L11.0974%208.8858V13.9093L5.0547%2016.5208L5%2016.4978V18.5622V49.2697L28.5607%2059.3828L30%2060L31.4402%2059.3828L55%2049.2697V16.4978L54.9556%2016.5167L48.9113%2013.9045V8.8858L48.6996%208.61631L41.9664%200L35.0216%208.8858V8.89534L29.9688%202.42864L24.9543%208.84489L24.7756%208.61631L18.0423%200ZM19.2707%205.16136L21.9568%208.59807H14.1278L16.7825%205.20159L19.2707%205.16136ZM43.1949%205.16136L45.8808%208.59807H38.0519L40.7058%205.20159L43.1949%205.16136ZM31.1972%207.59068L33.8833%2011.0276H26.0543L28.709%207.63091L31.1972%207.59068ZM13.3852%2010.3306H17.0983V21.69L13.3852%2020.0961V10.3306ZM19.0043%2010.3306H22.6994V24.0941L19.0043%2022.5082V10.3306ZM37.3101%2010.3306H41.0226V22.4964L37.3101%2024.0902V10.3306ZM42.9286%2010.3306H46.6237V20.0922L42.9286%2021.6781V10.3306ZM25.3117%2012.7601H29.0248V26.8089L25.3117%2025.215V12.7601ZM30.9318%2012.7601H34.6259V25.2426L30.9318%2026.8285V12.7601ZM48.9105%2016.4932L52.1795%2017.7078L48.9105%2019.1109V16.4932ZM11.0974%2016.4978V19.1148L7.82914%2017.7118L11.0974%2016.4978ZM7.87951%2020.6265L28.5607%2029.503V56.4892L7.87951%2047.6129V20.6265ZM52.1205%2020.6265V47.6129L31.4402%2056.4892V29.503L52.1205%2020.6265Z'%20fill='black'/%3e%3c/g%3e%3c/svg%3e)
Intuitive Viewport Tools
Precisely measure distances and review design specifications directly within your browser.
Distances and Sizes
Free
Select an element and hover over any other to spec the spacing between them.
'%20fill='%23C4C4C4'/%3e%3cline%20y1='-0.5'%20x2='180'%20y2='-0.5'%20transform='matrix(1%200%200%20-1%200%2020)'%20stroke='%23F6585C'%20stroke-dasharray='2%202'/%3e%3cline%20y1='-0.5'%20x2='180'%20y2='-0.5'%20transform='matrix(1%200%200%20-1%200%2058)'%20stroke='%23F6585C'%20stroke-dasharray='2%202'/%3e%3cline%20x1='20.5'%20y1='2.18557e-08'%20x2='19.5'%20y2='80'%20stroke='%23F6585C'%20stroke-dasharray='2%202'/%3e%3cline%20x1='160.5'%20y1='2.18557e-08'%20x2='159.5'%20y2='80'%20stroke='%23F6585C'%20stroke-dasharray='2%202'/%3e%3c/svg%3e)
Guidelines
Free
Guides are automatically placed along the borders of the selected element. They are helpful to verify that all elements are lined up correctly.
Box sizing
Free
Explore the structure of the block box model right on the page. Also useful when working with collapsing margins.
Multiselect
Shift+click, Shift+click, Shift+click... Gather a group of elements and measure distances relative to it.
Inspector
Get details about selected element without having to open the developer tools
Box model
Get all the data you need about the element's structure and dimensions.
Properties overview
A compact view of element styles and attributes, all in one place and grouped according to their purpose.
Parents tree
Navigation through the list of all parent elements. Especially handy when you need to get to the parent element, which is difficult to select by clicking
Measuremate
Get Measuremate
Extension functionality will be limited until the license is purchased
Lifetime licence with no limitation. You buy it once, and use it forever on any number of computers.