BWBLANKS WORKJA

Works / pixel-check

Pixel Check

A web page in the browser with a design image overlaid in translucent red on its right half. Frames and guide lines mark the heading, button, image and cards, and a gap is labeled "32px". The headline reads "Overlay your design. Spot every difference."
The pointer hovers over a card on a travel site, and a panel on the right shows that element's details, including tag and class, size "320 × 240 px", margin and padding, font, background color and corner radius. The headline reads "Inspect every element. See what shapes the page."
View on Chrome Web Store

Checking whether a page matches its design means flipping back and forth between the mockup and the implementation. Pixel Check is a Chrome extension for people who build web pages. It lays the design image directly over the page you are working on, so you can find differences down to a single pixel.

Every feature is free and unlimited. No ads, no license keys.

Overlay the design

  • Add PNG / JPG images by choosing a file or dragging and dropping. Added images stay in a list, and you can switch which one is shown (up to 10MB each)
  • Drag the image to move it, and set X / Y values to align it pixel by pixel. “Lock to horizontal center” keeps it centered on the screen
  • Change the opacity and display width
  • Choose a blend mode: normal, difference, multiply, screen or invert. With difference, the parts where the design and the page do not match stand out
  • Turn on “Move lock” and the image lets clicks pass through, so you can use the page with the overlay still in place

Measure

In measure mode, drag across the page to see the width, height and diagonal distance of the area.

Inspect elements

In element mode, hovering over an element shows its details right there: tag and class, size and position, display and position, margin and padding, font, background color, border and more. You can choose which items to show.

Match the page width

Enter a page width and Chrome’s window is resized to fit it. Useful when you want to check at the same width as the design.

Keyboard shortcuts

Action Windows and others Mac
Toggle the overlay Alt + Shift + O Control + Shift + O
Toggle move lock Alt + Shift + L Control + Shift + L
Open / close the in-page panel Alt + Shift + P Control + Shift + P
Switch to design / measure / element mode Alt + Shift + D / M / E Control + Shift + D / M / E

D / M / E work while the page has focus. The control panel opens from either Chrome’s side panel or the in-page panel.

About your data

Added images and settings are stored only in your own browser. Nothing is sent anywhere. See the privacy policy for details.

View on Chrome Web Store Privacy Policy
Back to top