SpecMatch – Pixel Perfect Design Overlay

Lay your design over the live page and check it pixel by pixel. Unlimited layers, difference mode, no ads, no account.

SpecMatch lays your design over the live page so you can check your build pixel by pixel. Add a screenshot or an export from your design tool, make it see-through and line it up. Switch to Difference mode and everything that matches turns black, so wrong spacing, font sizes and positions stand out at once. Free, with no layer limits, no ads and no account. FEATURES • Unlimited layers on every site, each with show/hide, lock, rename and reorder • Opacity, exact X/Y position and scale, with a 50% button for @2x exports • Drag a layer with the mouse, or nudge it with the arrow keys (Shift for 10px steps) • Difference mode to spot mismatches at a glance • Paste images straight from the clipboard • Optional: show automatically on a site, so your layers come back after every reload • Works on localhost, staging and live sites • Keyboard shortcut: Alt+Shift+P HOW TO USE 1. Open the page you're building and click the SpecMatch icon. 2. Click Add image, or paste a screenshot of your design. 3. Lower the opacity or switch to Difference mode, then line the layer up with the arrow keys. 4. Fix your code until the differences disappear. PRIVACY Your images and settings stay on your computer, in Chrome's local storage. SpecMatch has no servers, no analytics and no account. It only works on a page after you click its icon, or on sites where you turned on "Show automatically".