OverlayX

Pixel-perfect design overlay for any website

OverlayX is a pixel-perfect comparison tool for front-end developers, web designers, and QA engineers. Drop your Figma export, Photoshop mock-up, or any reference image onto a live web page and instantly see exactly where the implementation drifts from the design — without switching windows, screenshots, or external diff tools. ━━━━━━━━━━━━━━━━━━━━ WHO IT IS FOR ━━━━━━━━━━━━━━━━━━━━ • Front-end developers reviewing their own work against a mock-up • HTML/CSS coders matching pixel-perfect specs handed off by designers • QA engineers verifying visual fidelity before sign-off • Designers running acceptance checks on shipped layouts ━━━━━━━━━━━━━━━━━━━━ HOW IT WORKS ━━━━━━━━━━━━━━━━━━━━ 1. Open the OverlayX side panel (Alt+O or the toolbar icon). 2. Drop a PNG, JPG, or WebP file anywhere on the panel — or click "+ Add new layer". 3. The image appears on top of the page as a semi-transparent overlay. 4. Adjust position, opacity, scale, and blend mode until the mock-up and the live layout line up. Mismatches stand out immediately. ━━━━━━━━━━━━━━━━━━━━ KEY FEATURES ━━━━━━━━━━━━━━━━━━━━ ▸ Multiple layers per page Load several mock-ups (e.g. 1280, 768, 375 breakpoints) at once and switch between them with one click — perfect for responsive QA. ▸ Three blend modes - Invert (default) — turns the overlay into a colour-inverted reference; identical pixels disappear, differences pop. - Difference — pure black on matching pixels, vivid on mismatches. - Normal — classic transparency for general comparison. ▸ Precise positioning - Drag with the mouse or use arrow keys (1 px steps; Shift+arrow = 10 px). - Direct X / Y / scale inputs with mouse-wheel nudging. - One-click horizontal & vertical Center button that respects current scale. ▸ Lock / click-through mode Toggle Lock to make the overlay fully ignore mouse events — interact with the underlying page (click links, scroll, fill forms) while the design stays pinned on top. ▸ Per-layer Show / Hide Keep multiple overlays loaded; show only the one you need without losing position, scale, or opacity of the others. ▸ Persistent state per site Layers, positions, scale, opacity, blend mode, and lock state are saved per page origin and restored automatically after reloads, tab switches, or browser restarts. ▸ Native Chrome Side Panel Lives in Chrome's built-in side panel — no floating windows, no popups stealing focus, no cluttered tab bar. ▸ Keyboard-first workflow - Arrows / Shift+arrows — move the active layer - C — center, R — reset position - H — hide, L — lock - 0–9 — set opacity (0%, 10% … 90%), Shift+0 = 100% - Tab / Shift+Tab — cycle through layers - Alt+O — open the side panel (rebindable in chrome://extensions/shortcuts) ▸ Wide format support PNG, JPG/JPEG, WebP. Drop multiple files at once to create several layers in one step. ━━━━━━━━━━━━━━━━━━━━ WHY OVERLAYX ━━━━━━━━━━━━━━━━━━━━ • Stay in the browser. No screenshot-and-compare loop. No extra apps. • Stay in focus. The native side panel keeps the design beside the page, not on top of it. • Stay fast. The overlay uses only CSS transforms and opacity — no layout thrashing, no page lag. • Stay accurate. Pixel-level nudging with keyboard, integer coordinates, blend modes built for spotting sub-pixel drift. ━━━━━━━━━━━━━━━━━━━━ PRIVACY ━━━━━━━━━━━━━━━━━━━━ OverlayX does not collect, transmit, or share any user data. There is no backend, no analytics, no telemetry, no remote logging. Images you load are stored locally in your browser's IndexedDB. Layer settings (position, scale, opacity, blend mode, lock state) are stored locally via chrome.storage.local, indexed by page origin. Nothing leaves your computer. Uninstalling the extension removes all stored data. ━━━━━━━━━━━━━━━━━━━━ REQUIREMENTS ━━━━━━━━━━━━━━━━━━━━ Chrome 114 or newer (required for the Side Panel API). Works on any http:// or https:// page. ━━━━━━━━━━━━━━━━━━━━ Free today. Free tomorrow. No subscription, no feature paywalls, no account required.