PixelGhost: Pixel Perfect Design Overlay & Visual QA

Description

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 the live web page so you can see exactly where the build drifts from the intended design: spacing, type size, alignment, and color. Add a reference image, set the opacity or switch to a difference blend, and every mismatch becomes obvious. Then keep going without opening DevTools. Five inspection tools ride along on the same page: sample a color, measure an element, read its computed styles, highlight everything matching a CSS rule, and capture what you found. HOW IT WORKS 1. Open the page you want to check. 2. Add a reference image: upload a file, add a whole folder, paste from your clipboard, or link a hosted HTTPS image URL. 3. Align it, then set the opacity or a blend mode and compare. 4. Measure, sample, inspect, or capture from the on-page tool rail. 5. Your setup is saved for that URL and restored the next time you open it. OVERLAY AND COMPARE - Four ways to add a reference image: local files, a whole folder at once, an image pasted from your clipboard, or a hosted HTTPS URL. - Multi-layer workflow: keep several reference images in one workspace, choose which layer is displayed, and show or hide it. - Precise alignment: drag the overlay, nudge it by 1 or 10 pixels, type exact X/Y offsets and scale, or fit and center it horizontally. - Rotation and reset: rotate in 90-degree steps, sweep smoothly to any angle, or reset position, scale, opacity, centering, and rotation in one click. - 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. - Lock and blink: lock an overlay to make it click-through so you can use the page underneath, and hold the backslash key to blink it off and on. - Keyboard control: Ctrl+Left/Right rotates in 90-degree steps, Ctrl+Shift+Left/Right sweeps to any angle, Ctrl+Up/Down resizes, and Shift makes every step larger. Alt+Shift+G shows or hides the on-page panel, and you can rebind it in your browser's keyboard-shortcut settings. - Floating on-page panel: choose the active layer and control position, scale, rotation, visibility, lock, opacity, and blend mode with the popup closed. - Per-page auto-restore: your setup (images, position, opacity, visibility, lock, scale, rotation, centering, and blend mode) is saved and restored for each page URL you work on. - History and projects: see every URL with a saved overlay setup in one list, delete one URL or clear them all, and save a comparison as a reusable named project you can reload later. FIVE TOOLS ON THE PAGE (NEW, IN BETA) - Color Picker: sample any pixel on screen with the browser's own eyedropper, copy the value as HEX or RGB, reuse your last twelve picks, and read the palette PixelGhost extracts from the page you are on. - Page Ruler: point at an element to pin its size and coordinates, or drag your own measurement box and resize it from the handles. Keep several measurements on screen at once and clear them in one action. - Inspector: snap a card to any element and read its layout, visual, and typography values, copy the computed CSS or a selector for your code, and preview the element states the page's own stylesheet defines. Choose which properties the card shows, pin the ones you use most, and reorder them. - Element Selector: draw a box on every element matching a CSS rule. Start from a ready-made rule such as headings, landmarks, links, buttons, form fields, or images missing alt text, write your own selector, combine include and exclude rules, and step through the matches one by one. - Screenshot: capture a region you drag, one element exactly, or the whole page stitched from screens, at the output scale you pick, then save a PNG or copy it. You decide whether your overlay layers are baked into the shot, and a full-page capture can pin a sticky header so it is photographed once instead of on every screen. These five are new in this release and are marked Beta in the interface while they settle. They work with or without a reference on screen, so the tool rail is useful on any page you are debugging. - Light and dark themes with five accent colors, synced between the popup and the on-page panel. - Interface available in English, German, Spanish, French, Brazilian Portuguese, Russian, Japanese, and Simplified Chinese. - Works on ordinary HTTP and HTTPS pages. Browser-internal pages, extension stores, and other restricted pages do not allow overlays or capture. 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 lists above is locked, metered, or held back: - Unlimited overlay 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 saved-URL history. - Every blend mode, including Difference. - All five tools, including full-page capture at every output scale. 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 design 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. - Measuring a gap or reading a computed style without opening DevTools. - Pulling the exact color out of a rendered page. - Finding every heading, link, or image missing alt text on a page. - Attaching a full-page capture to a bug report. - Checking a redesign against a screenshot of the page it replaces. PRIVACY FIRST PixelGhost requires no account, has no developer-operated server, and performs no analytics, tracking, or advertising. Page URLs, your overlay images, remote image addresses, comparison settings, saved projects, sampled color values, and selector rules are stored locally in your browser profile. Screenshots are never stored: a capture is held only while the panel offers to save or copy it, and is then discarded. 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.

Details & SEO