FreeChrome and Firefox extension
Match your design pixel for pixel
Pixel Perfect Pro lays your design image over the page you're building, so you can line them up and see every place they differ. No account, and your designs stay in your browser.
Screenshots
How it works
Open the page you're building and click the Pixel Perfect Pro icon. If the page has frames, pick where the overlay goes.
Add your design as an image: drag and drop it, choose a file, paste it from the clipboard or add it by URL.
Drag the design into place, or nudge it one pixel at a time from the keyboard.
Lower the opacity, or set the blend to Difference so every mismatch lights up. Fix the page and check again.
What it does
Blend modes
Set the blend to Difference and every pixel that doesn't match the design lights up. Multiply, Overlay, Screen and Exclusion are there too.
Fade, invert or wipe
Fade the design to see both layers at once, invert its colors on dark pages, or drag a slider that wipes between the design and the page.
Exact placement
Set position, rotation, scale and width by number, center on either axis, and lock the design so clicks go through to the page.
Column grid
Bootstrap, Tailwind and Material presets, or your own columns, gutter, width, offset, color and opacity, plus a baseline grid. Works without a design too.
Ruler and guides
Measure distances and drag guide lines onto the page.
Several designs per site
Each website keeps its own designs. Group them with tags, flip through them with next and previous, and link one to a breakpoint so the window resizes to its width.
Your hotkeys and colors
Give each action up to two key combinations, and pick your own toolbar colors for the light and dark themes.
Survives reloads
Reload the page and the overlay reopens with the same design in the same place. It also works inside iframes, and in Chrome on local HTML files.
Private by design
- No account, no analytics, no tracking and no ads.
- Your designs are saved in your browser, per website, and never uploaded.
- The only network request it makes is downloading a design you add by URL.
- The overlay loads only in tabs where you open it.
Free, with no account
Everything is included
- Multiple designs per website, with tags and breakpoints
- Blend modes, opacity, inversion and the compare slider
- Column grid, baseline grid, ruler and guides
- Custom hotkeys and toolbar themes
- Iframes, and local HTML files in Chrome