Perfectpixel By Welldonec

PerfectPixel adds a semi-transparent image overlay on top of any web page, letting you compare your frontend implementation against the original design mockup directly in the browser. Upload a design comp, adjust opacity, and immediately see where your code diverges from the spec — with pixel-perfect accuracy. No more switching between tabs or squinting at two screens side by side.

How it works: install the extension, open any page, and drop in an image — drag and drop, paste a URL, paste from clipboard, or use the file picker. Position and scale the overlay, then adjust opacity to compare.

Features:

- Overlay any PNG, JPG, or SVG on any web page
- Adjustable opacity for real-time visual comparison
- 5 blend modes — Normal, Difference, Invert, Multiply, Overlay — each useful for catching different types of mismatches
- Lock the overlay to click through it and interact with page elements underneath
- Per-domain persistence: your layers stay saved per site and restore automatically across browser sessions
- Multiple layers per domain
- Scaling, repositioning, and centering controls
- Keyboard shortcuts for common actions

New in version 3.0:

- 5 blend modes for advanced comparison (Difference mode instantly highlights mismatches between design and implementation)
- Refreshed, modern UI with better feature discoverability
- Teams and Enterprise plans for agencies and development shops

Pro features:

- Dark theme
- Unlimited simultaneous layers (free tier supports 2)
- Layer rotation
- Custom icon, accent color, and custom CSS

Built for frontend developers, QA engineers, agencies, and development teams who need to verify that what they shipped matches what was designed.

350,000+ developers. 10+ years on the Chrome Web Store.