.png){kind=small}
Match thedesign, exactly.
Drop your mockup on the live page. Catch the misaligned padding, the mismatched color, the wrong font size. Ship once, not three times.
How it works
Stop toggling between
design and browser
Overlay the design directly on your page for a pixel‑perfect match.
Catch every mismatch before it ships, in development or visual QA, whether the code is hand‑written or AI‑generated.
Pixel-Level Control
Arrow keys for 1px moves, Shift+arrows for 10px. Mousewheel opacity, centering, HiDPI scale, touch support, and keyboard shortcuts for fast toggling.
PROLayer rotation
Blend Modes
“Difference” flags every mismatched pixel, a fast visual-regression check against the approved design. “Multiply” and “Overlay” for color and tone.
Multiple Layers & Folders
Drag files in, paste a frame copied from Figma, or load images by URL. Overlays are kept per domain across sessions and tabs. Group them in folders.
FREE2 layers at a time per domain
PROUnlimited layers · Folders
Lock & Click-Through
Lock the overlay, then click through to inspect the DOM with DevTools and tweak CSS live. No toggling required.
Side Panel for Mobile Sites
In DevTools device mode, move the panel to the browser’s side panel. The viewport stays clear; overlays stay on the page. How to check a mobile build
Mockups Stay on Your Device
Layers are stored locally. Image contents are never uploaded, and the addresses of the pages you work on never leave your browser. Privacy policy
