This Chrome Snippet applies a transparency grid on body background of any page, so you can easily check image transparencies or any background issues on the page.

Here is the snippet:

document.body.style.background = "";
document.body.style.backgroundImage = "linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)";
document.body.style.backgroundSize = "20px 20px";
document.body.style.backgroundPosition = "0 0, 0 10px, 10px -10px, -10px 0px";

How To Use

1. To open up Chrome Developer Tools (DevTools) press F12 on any web page.

2. On the Sources tab, select Snippets on the left-hand panel.

3. Click on + New Snippet button and paste the code in the editor. Then press CTRL+S to save the code.

4. To run the snippet, right click on the snippet and select Run.


I hope you enjoyed this tip. Follow me on twitter for more tips like this! Enjoy!