.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.
Drag a file, paste from clipboard, or load from URL
Tune opacity, position pixel-by-pixel, and use blend modes to highlight every mismatch
Lock the overlay, click through to page elements, and tweak your CSS in real time
Drag a file, paste from clipboard, or load from URL
Tune opacity, position pixel-by-pixel, and use blend modes to highlight every mismatch
Lock the overlay, click through to page elements, and tweak your CSS in real time
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
Load several images at once from files, clipboard, or URLs. Overlays are kept per domain across sessions and tabs. Group them in folders.
FREE2 layers 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.
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