LayerGuide: Pixel Perfect Overlay, Ruler, Guides & Inspector

Overlay your design on any page, measure in pixels, drop guides, use the magnifier, and inspect fonts, spacing and WCAG contrast.

Compare your build to the design without leaving the browser. LayerGuide puts your mockup on top of any live page, measures it in pixels, and inspects the fonts, spacing and contrast underneath. Built for front-end developers, UI/UX designers, agencies, QA testers and freelancers who have to prove that a build matches the design. ━━ WHAT YOU CAN DO ━━ • Overlay a design export (PNG, JPG, WebP, SVG) on the live page and compare it 1:1 • Nudge the overlay one pixel at a time with the arrow keys — 10 px with Shift • Measure any distance with drag-and-drop rulers • Pull Photoshop-style guides with pixel distance badges between them • Magnify any area up to 10x over a pixel grid • Hover an element for its size, box model, fonts and image details • Check text against WCAG AA/AAA contrast as you hover • Audit every font on a page — family, size, weight, color and where each one is used ━━ PIXEL-PERFECT IMAGE OVERLAY ━━ Upload your design, set opacity and scale, then position it with sliders, by dragging, or with the arrow keys — 1 px per press, 10 px with Shift. Lock the X or Y axis so an aligned overlay cannot drift. Invert the colors to make a one-pixel difference obvious. Position, scale and opacity are remembered per page, so the overlay is still in place tomorrow. Free, in full. ━━ RULERS AND GUIDES ━━ Drag a ruler anywhere on the page for an instant pixel measurement, resize it from any corner, right-click to remove it. Pull guides out of the ruler bars to check alignment across a whole layout; distance badges show the gap between them in pixels. Free: 2 rulers and 4 guides per page. Pro: unlimited rulers and guides, at any opacity. ━━ MAGNIFIER ━━ Inspect anti-aliasing, hairline borders and 1 px offsets. Hardware-accelerated, with a tick grid and a grid color you choose — free for everyone. Free: up to 1.5x, 250 px window. Pro: up to 10x, three window sizes. ━━ ELEMENT INSPECTOR ━━ Hover any element to read its dimensions, content box and border box, its font, and — for images — dimensions, format, file size and alt text, including a warning when the alt attribute is missing. Pin as many tooltips as you like to compare two elements side by side. All free. Pro adds the exact margin and padding values with color-coded overlays drawn on the element, image radius, border and object-fit details, and a WCAG contrast verdict (AA / AAA) for the text under your cursor. ━━ FONT SCANNER (PRO) ━━ Scan a whole page and get every font grouped by style: family, size, weight, line height, letter spacing, color, and the elements using it. Run it in the Chrome side panel and keep browsing while it works. It turns "which fonts does this site actually use?" into a list you can hand to a client. ━━ HISTORY AND BACKUP ━━ Every page you have worked on is listed with a thumbnail preview, so you can pick up where you left off. Export and import all of your settings as a JSON file — free, forever. Reinstall, move to a new laptop, or hand a configuration to a teammate without needing a license. ━━ WHAT YOU GET FOR FREE ━━ The image overlay, arrow-key nudging, axis locks, the inspector tooltip with pinning, image details, the magnifier grid, history and backup are free and unlimited — plus 2 rulers, 4 guides and 1.5x zoom on every page. No account, no sign-up, no trial clock. ━━ WHAT PRO ADDS ━━ Unlimited rulers and guides at any opacity, 10x magnifier in three sizes, exact margin and padding values with on-page overlays, the WCAG AA/AAA contrast checker, the whole-page Font Scanner, one saved overlay position for an entire domain, custom start offsets, and automatic axis lock on upload. Launch pricing: 17.99 USD per year (list price 29.99) or 67.49 USD once, for lifetime access (list price 89.99). Whatever you pay is the price you keep — a renewal never costs more than your first payment. One license covers 3 of your devices. 14-day refund. ━━ PRIVACY ━━ LayerGuide does not track your browsing and shows no ads. Overlay images, rulers, guides and per-page settings stay in your browser's local storage. Activating a Pro license sends only the license key, a random device identifier and your browser version to the licensing server, so that the 3-device limit can be applied. Payments are handled by Stripe; card details never reach us. ━━ LANGUAGES ━━ English, Español, Français. The whole interface — options page, side panel and the in-page control panel — follows the language you choose, and switching takes effect immediately. ━━ FREQUENTLY ASKED QUESTIONS ━━ What does LayerGuide do? It overlays a design mockup on a live web page and measures the difference, so you can check a build against the design in the browser instead of by eye. Is it free? Yes. The image overlay, the element inspector, history and backups are free, with no account. Pro unlocks unlimited rulers and guides, 10x zoom, margin and padding values, the contrast checker and the Font Scanner. Does it work with Figma, Sketch or Adobe XD? Yes — export your frame as a PNG, JPG, WebP or SVG and drop it into LayerGuide. LayerGuide is an independent tool and is not affiliated with those products. How do I align the overlay exactly? Position it with the arrow keys (1 px per press, 10 px with Shift), then lock the X or Y axis so it cannot move by accident. Inverting the colors makes a single-pixel offset visible immediately. Does the overlay survive a page reload? Yes. Position, scale and opacity are saved per page. Pro can save one position for a whole domain, so every new page on that site starts already aligned. Can I measure margin and padding? The inspector reports dimensions and box-model numbers for free. Pro adds the exact margin and padding values, with color-coded overlays drawn on the element. Which browsers does it support? Chrome 114 or newer, and Chromium-based browsers such as Edge, Brave, Opera and Arc. LayerGuide is made by MAJinnov — https://majinnov.io