fcbffocoaopnenhgbchlchgndohggdei
Measure distances between any elements on any website. Pixel ruler + CSS inspector for pixel-perfect design handoff. Measure distances between any elements on any website. Pixel ruler, CSS inspector, and alignment guides β everything you need for pixel-perfect design handoff, right in your browser. Measuremate is a measuring tool built for frontend developers, web designers, and QA engineers who need precise pixel measurements without leaving the browser. Lightweight, private, and fast. π INSPECTOR MODE β Click any element to inspect it. See dimensions, distances to neighboring elements, and full CSS details. Hover to preview before selecting. π GUIDES MODE β Place vertical and horizontal ruler guides anywhere on the page. Snap to element edges, measure between guides, and verify alignment like in Figma. Switch between modes with a single keystroke. ββββββββββββββββββββββββ WHAT YOU CAN DO ββββββββββββββββββββββββ π MEASURE DISTANCES between any two elements β spacing, gaps, padding, margins. On-page dimension lines show exact pixel values. π― INSPECT THE CSS BOX MODEL with visual breakdown of content, padding, border, and margin (including negative margins). π¬ VIEW DETAILED CSS by category β Layout (display, position, flex, grid, z-index), Text (font, color, line-height, letter-spacing), and Attributes. π³ NAVIGATE THE DOM TREE β browse from root to any element, hover to preview, click to inspect. π DROP VERTICAL OR HORIZONTAL GUIDES on any page with a single keystroke. Use arrow keys for 1px precision, Shift+arrows for 10px jumps. 𧲠SNAP TO ELEMENTS β guides and cursor automatically snap to element edges and centers. Cmd+Shift+M (Mac) / Ctrl+Shift+M (Win) β Toggle Measuremate on/off 1 β Switch to Inspector mode 2 β Switch to Guides mode M β Show/hide the control panel V β Drop a vertical guide at cursor H β Drop a horizontal guide at cursor S β Toggle snap-to-alignment Q β Clear all guides Arrow keys β Move cursor/guides 1px (Shift for 10px) Esc β Clear selection ββββββββββββββββββββββββ WHO IT'S FOR ββββββββββββββββββββββββ β’ Frontend developers verifying pixel-perfect implementation against designs β’ Web designers checking spacing, alignment, and typography on live sites β’ QA engineers validating responsive layouts across breakpoints β’ Teams doing design handoff from Figma, Sketch, or other design tools β’ Anyone who needs a fast, clean ruler for the web β Clean UI β does nothing until you activate it. No interference with the pages you browse. β Lightweight β under 500 KiB, no bloat, no telemetry. β Privacy-first β zero tracking, zero data collection. β Works on any website, including SPAs and iframes. β Figma-like distance measurements you already know how to read. β Keyboard-first workflow for power users. 1. Click the Measuremate icon in your toolbar (or press Cmd/Ctrl+Shift+M) to activate 2. Hover over any element to preview its dimensions 3. Click to select β see distances to nearby elements appear on the page 4. Open the Main Panel with M to see full CSS, box model, and DOM tree 5. Press 2 to switch to Guides mode and drop alignment rulers ββββββββββββββββββββββββ FREE AND PRO ββββββββββββββββββββββββ We ship updates regularly. Feature requests and bug reports are always welcome.
Screen Ruler - Measure and Inspect the Web
Web inspector for designers & developers. Measure elements, extract CSS & colors, capture screenshots & more. Screen Ruler is the perfect companion for web developers and designers wanting to validate the implementation of their websites. Once activated, it allows you to view the sizes, margins, paddings, tag names, IDs, and classes simply by hovering over any web content. You can also select an item to measure distances to others. - Toggle the extension by clicking the icon, selecting from the right-click context menu, or using the shortcut `Alt/Option + Shift + R`. - Hover over items on web pages to display their sizes, margins, paddings, tag names, IDs, and classes. - Select an item by clicking on it directly; this will turn the highlight red. To deselect, click again, press Escape or select a different item. - To select the parent, use `Alt/Option + Up`. Use `Alt/Option + Down` to reverse your selection. - View the computed CSS of the currently selected item in the side panel. Click the "Copy CSS" button to copy the computed CSS to your clipboard. - 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. - Access from the context menu. - Computed CSS inspect. - Copy CSS to clipboard. - Page rulers for precise measurements (horizontal and vertical guides with crosshair). - Color picker tool to sample and copy colors from anywhere on the page. - Element Screenshots: Capture cropped screenshots of selected items using `Ctrl/Cmd + Shift + S`. - Accessibility Issues: Automatically detect and highlight WCAG contrast failures in your selection with actionable recommendations. - Works on any web page. - Customize keyboard shortcuts by visiting `chrome://extensions/shortcuts`. Screen Ruler PRO A PRO tier is also available which unlocks additional features. - Floating Inspector: See detailed properties when you hover, including position, size, rendered font, colors and more. - Responsive Mode: Test your designs across different device viewports with an interactive device emulator and custom dimensions. - Box Shadow Visualization: Interactive breakdown of multi-layer box shadows with an exploded view. - Animation Analysis: Visualize CSS animation timing curves and copy animation properties. - Asset Extraction: Extract and download images, SVGs, and vector assets. - Color Extraction: Extract and copy color palettes from selected content with hex, RGB, and HSL values. - Layout Grid Overlay: Overlay a customizable layout grid for perfect design alignment. - CSS Selector Search: Find and highlight items using CSS selectors. - Typography: Analyze and extract all typography styles used in your selection. - X-Ray Mode: Reveal the underlying structure of the page by outlining all content. PRO requires a one-off payment for lifetime access. Made For - Developers: Spot layout issues or identify alignment problems. Whether you're tweaking margins and paddings, or just making sure everything lines up correctly, this tool becomes an indispensable addition to your development toolkit. - Designers: Ensure your designs have been implemented with pixel-perfect accuracy. It acts as a bridge between design and development, allowing you to check if every component aligns exactly as you intended. - Designed specifically for stability in Google Chrome 116+. - Installable on any Chromium browser; however, for the best experience, make sure your browser supports all the required APIs (like Side Panel and Offscreen). If there are any issues with installation, update your browser to the latest version and try again.
Measure It
Measure It is pixel-perfect page ruler for measuring sizes, distances and positions directly on web pages. Measure It is a professional pixel-perfect page ruler designed for developers, UX designers and QA testers. It allows you to measure sizes, distances and positions directly on web pages with speed and accuracy. Key features: β’ Measure width and height using a box selection β’ Measure distance, offset and angle between two points β’ Switch between box and distance measurement modes β’ Axis lock with Shift key for precise horizontal or vertical measuring β’ Center-based measuring with Alt key β’ Toggle snap on and off for pixel-perfect alignment β’ Copy measurement values to clipboard β’ Export measurements as PNG screenshots β’ Clean and minimal floating panel that does not block the page How to use Measure It: β’ Click the Measure It icon to activate or deactivate the tool β’ Click and drag to start measuring on the page β’ Switch between measurement modes using keyboard shortcuts Keyboard shortcuts: β’ B β Box measurement mode β’ D β Distance measurement mode β’ Shift β Lock measurement to horizontal or vertical axis β’ Alt β Measure from the center β’ S β Toggle snap on or off β’ ESC β Exit Measure It Privacy and security: MeasureIt respects your privacy. The extension does not collect, store or transmit any personal data. All measurements are performed locally in your browser. No tracking, no analytics, no ads and no external network requests are used. Measure It only runs when you activate it and does not operate in the background. Limitations: MeasureIt does not work on Chrome Web Store pages, chrome:// pages and some protected websites (for example YouTube). This is a security restriction enforced by Google Chrome and applies to all similar measurement extensions.
PixGrid Ruler
Your Pixel-Perfect Ruler for Measuring Web Elements Introducing PixGrid: Your Ultimate Pixel-Perfect Ruler for Web Element Measurements Discover PixGrid, the browser extension designed to enhance your web browsing experience with pinpoint precision. Whether you're a designer, developer, or simply someone who values accuracy, PixGrid is your go-to tool for measuring web elements effortlessly. Features: π Ruler Tool: Get pixel-perfect measurements with our intuitive ruler feature. Say goodbye to estimation and hello to precision. π Measure Web Elements: Seamlessly measure elements on web pages with a ruler tool to ensure your designs align perfectly and your layouts are on point. π±οΈ Free Selection: Enjoy the freedom to select with the ruler any element on a webpage and instantly measure its size with ease. β¨οΈ Keyboard Shortcuts: Navigate through measurements swiftly using convenient keyboard shortcuts, streamlining your workflow. π¨ Designers: Perfect for ensuring your designs are pixel-perfect and align seamlessly with your vision. π» Developers: Streamline your coding process by accurately measuring and placing web elements in the right spots. π Professionals: Architects, photographers, and other professionals can rely on PixGrid for precise measurements on web content. π Students: Ideal for learning about web design and development, giving you the tools to practice and grow. Elevate your browsing experience today with PixGrid β where precision meets simplicity. Try it now and experience the future of accurate web element measurement.
CSS Pully β Font & Color & Style Inspector
Font & CSS Detector - CSS Pully extracts colors, fonts, shadows, and styles from any webpage. Perfect for designers & developers. π Instantly inspect fonts, extract colors, analyze CSS styles, and download all images from any website with CSS Pully β your all-in-one web design extension for Chrome. Perfect for frontend developers, UI/UX designers, marketers, and content creators looking for fast, accurate, and powerful tools to reverse-engineer websites and speed up their workflow. π₯ CSS Pully is a complete solution for inspecting website fonts, grabbing colors, copying CSS styles, downloading website images, and auditing layout properties β all in one click. π¨ Features include: π€ Detect all fonts used on a web page, detect Google Fonts π― Extract color palettes π View detailed typography information β font size, line-height, font weight, and spacing π Get all CSS shadows, borders, border radius, margins, paddings, and layout sizes π Instantly highlight and inspect styled elements directly on the page π Copy full CSS styles of selected elements in one click πΌ Collect all images from a website instantly 𧩠Filter downloaded images by file type β PNG, JPG, SVG, WebP, and GIF π¦ Download all images in a single ZIP file βοΈ No coding skills needed β user-friendly interface for designers and non-tech users π‘ Lightweight and fast β does not slow down browser performance π Works on all types of websites including SPAs and dynamic web apps π§ͺ Perfect for design audits, reverse engineering, debugging CSS, creating style guides, or collecting brand assets β Benefits of using CSS Pully: β All-in-one Chrome extension for font detection, color extraction, and CSS inspection β Super easy to use, even for beginners β Pixel-perfect accuracy for copied CSS values β Saves time by removing the need to manually inspect code β Supports inspection of responsive layouts, font sizes, and visual spacing β Enables one-click image downloader with file-type filters and ZIP export β Ideal tool for website analysis, frontend debugging, and UI style copy β Compatible with Chrome, Edge, Brave, and other Chromium-based browsers π§ Use cases: β Copy font styles and colors from competitor websites β Collect assets to build style guides and UI kits β Extract CSS to recreate design elements in your project β Download all site images for marketing or content reuse β Debug and fix inconsistent spacing, font sizes, and design issues β Learn and practice design systems from real websites β Speed up handoff between designers and developers πΉ Can I download images from websites? πΌ Yes! You can collect all images on a page and download them in a single ZIP file. πΉ Can I filter image downloads by file type? π Yes, filter by PNG, JPG, SVG, WebP, and more. πΉ Does it work with all websites? π Yes, it works on static pages, SPAs, and all modern websites. πΉ Can I use it offline? π΄ Basic features like CSS inspection work offline, but font and color analysis may require internet access. πΉ Will it slow down my browser? β‘ No, CSS Pully is lightweight and optimized for performance. πΉ Can I copy CSS styles? π Yes, one-click style copy is supported for any inspected element. Download CSS Pully now and unlock the ultimate toolkit for web design inspection. Instantly detect fonts, extract color palettes, analyze CSS properties, collect and download images, and improve your productivity across all design and development tasks. CSS Pully is the must-have Chrome extension for any designer, developer, or creative professional working on the web.
