Dimensions

A tool for designers to measure screen dimensions

Dimensions is a powerful and easy-to-use Chrome extension designed for designers and developers to accurately measure screen dimensions and distances between elements within a browser. By moving your mouse pointer, you can instantly measure the distance up/down and left/right until you hit a border of any element, making it perfect for quickly checking spacing and alignment on websites. Key Features Measure distances between images, buttons, text, icons, input fields, videos, GIFs, and any visible HTML elements. Supports measuring area boundaries and circle radii by holding the Alt key. Works seamlessly with mockups (PNGs or JPEGs) directly in Chrome to assist in design validation. Fast toggle with ALT + D keyboard shortcut for starting and stopping measurements. Open Source and hosted on GitHub, allowing community contributions and easy porting to other browsers like Firefox. Dimensions streamlines the design and development process by providing precise pixel measurements without the need for complicated tools, helping you maintain pixel-perfect layouts and spacing. The Extension has been updated to manifest v3, the older version of the extension (v2) https://chromewebstore.google.com/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect. It doesn't really work with images because there the colors change a lot pixel to pixel. Images & HTML Elements Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser. Mockups Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring. Keyboard Shortcut You can start and stop dimensions with the ALT + D shortcut. Area Boundaries Wanna get the radius of a circle? Is text standing in your way? Press Alt to measure the dimensions of a connected area. Open Source Dimensions is Open Source and hosted on Github. Want to port it to Firefox? Go ahead and fork it. Pull requests are welcome! https://github.com/mrflix/dimensions