SpecMatch
Check your build against the design, pixel by pixel.
SpecMatch lays your design over the live page in Chrome. Make it see-through, line it up, and every wrong margin, font size or position shows up right away.
How it works
- Open the page you're building and click the SpecMatch icon.
- Add a screenshot or export of your design, or just paste it.
- Lower the opacity or switch to Difference mode, and line it up with the arrow keys.
- Fix your code until the differences disappear.
Everything you need, nothing in the way
- Unlimited layers on every site
- Show, hide, lock, rename and reorder layers
- Opacity, exact X/Y position and scale
- One click to 50% for @2x design exports
- Drag with the mouse or nudge with arrow keys
- Difference mode: matching parts turn black
- Paste images straight from the clipboard
- Optional: layers come back after every reload
- Works on localhost, staging and live sites
- Shortcut Alt+Shift+P
Questions
Is it really free?
Yes. Layers, difference mode and every feature on this page are free, with no layer limit and no ads.
Where do my design images go?
Nowhere. They're stored on your computer, in Chrome's own storage. SpecMatch has no servers, no analytics and no account. See the privacy policy.
Moving from PerfectPixel or another overlay tool?
SpecMatch works the same way: add an image, set the opacity, line it up. The difference is that you get unlimited layers per site without paying.
Why does it ask for access to a site?
Only if you turn on "Show automatically on this site", and only for that one site, so your layers come back after a reload. Otherwise it only works on a page after you click its icon.