PerfectPixel

A browser extension that overlays design images directly on live web pages to identify visual differences in spacing, color, typography and layout before shipping. It is for developers, designers and QA engineers in web teams who need to match implemented pages to approved designs, including hand-written and AI-generated code. It is delivered as a Chrome and Edge extension that stores layers locally in the browser and provides opacity, positioning and blend-mode controls.

Key features

• Overlay design directly on live page
• Adjust opacity with mousewheel
• Move 1px with arrow keys
• Blend modes Difference/Multiply/Overlay
• Multiple layers and folders per site
• Import from file, clipboard, or URL
• Supports PNG, JPG, SVG, WebP
• Lock overlay and click-through to DOM
• Keyboard shortcuts for fast toggling
• HiDPI scale and horizontal centering
• Layer rotation
• Persist layers across sessions and tabs