PixelGhost: Pixel Perfect Design Overlay & Multi-Layer

Pixel perfect design overlay. Drop a mockup on any page and see where your build drifts. All features free, no account.

Pixel perfect visual QA, without leaving the page you are building. PixelGhost overlays your design mockup on any live web page so you can see exactly where the implementation drifts from the design: spacing, font size, alignment, and color. Add a reference image, set the opacity or switch to a difference blend, and every mismatch becomes obvious. Stop switching between a design file and the browser to eyeball a layout. The reference sits on the real page, at real width, over real content, with precise controls for position, scale, rotation, and comparison. HOW IT WORKS 1. Open the page you want to check. 2. Add a reference: upload a file, add a whole folder, paste an image from your clipboard, or link a hosted HTTPS image URL. 3. Align it, then set opacity or a blend mode and compare. 4. Your setup is saved for that URL and restored the next time you open it. CORE FEATURES - Multiple ways to add references: upload local files, add a whole folder, paste an image from your clipboard, or link a hosted HTTPS image URL. - Multi-reference workflow: keep several reference layers in one workspace, select which reference is displayed, and show or hide the selected layer. - Precise alignment: drag an unlocked overlay, nudge it by 1 or 10 pixels, enter exact X/Y offsets and scale, or fit and center it horizontally. - Rotation and reset: rotate left or right in 90-degree steps, or reset position, scale, opacity, centering, and rotation in one click. - Visibility and lock controls: leave an overlay unlocked and pinned to the viewport, or lock it to the page so it moves with page scrolling. - Opacity and blend modes: adjust from fully transparent to fully opaque and switch between Normal, Invert, Difference, Multiply, and Overlay. At 100% opacity in Difference mode, matching pixels turn black so drift in spacing, color, or alignment stands out. - Floating on-page widget: switch references and control position, scale, rotation, visibility, lock, opacity, and blend mode with the popup closed. - Per-page auto-restore: your overlay setup (images, position, opacity, visibility, lock, scale, rotation, centering, and blend mode) is saved and restored for each page URL you work on. - Layers history: see every URL with an auto-saved overlay setup in one list, delete the saved layers for a single URL, or clear them all in one click. - Named projects: save a comparison setup as a reusable named project you can reload later. - Keyboard transforms: Ctrl+Left/Right rotates a layer in 90 degree steps, Ctrl+Shift+Left/Right sweeps smoothly to any angle, and Ctrl+Up/Down resizes it. Add Shift for larger steps. - Light and dark themes with five accent colors, synced between the popup and the on-page widget. - Works on ordinary HTTP and HTTPS pages. Browser-internal pages, extension stores, and other restricted pages do not allow overlays. EVERYTHING ABOVE IS FREE Pro-grade controls, with no pro tier. PixelGhost has no paid plan, no trial, no upgrade prompt, and no in-app purchases. Nothing in the list above is locked, metered, or held back: - Unlimited reference layers in a workspace, not a capped number. - Layer rotation, in 90-degree steps or swept to any angle. - Dark theme, and all five accent colors. - Named projects, and the full layers history. - Every blend mode, including Difference. No account, no sign-in, and no email required to use any of it. WHO IT IS FOR Front-end developers checking a build against a mockup, designers reviewing a handoff, and QA engineers running visual regression passes. If your job involves the sentence "this is two pixels off," this is the tool. WHAT PEOPLE USE IT FOR - Comparing a coded page against the original design comp. - Verifying responsive breakpoints against their mockups. - Catching spacing, baseline, and alignment drift before review. - Checking a redesign against a screenshot of the page it replaces. - Reviewing a design handoff without opening the design file. PRIVACY FIRST PixelGhost requires no account, has no developer-operated server, and performs no analytics, tracking, or advertising. Page URLs, local overlay images, remote image addresses, comparison settings, and saved projects are stored locally in your browser profile. If you add an HTTPS image URL, your browser requests that image from the server you selected. Displayed overlays are added to the current page and may be inspectable by scripts on that page. See the privacy policy for details.