CSS masking can be used to apply unique texture on your website elements like headings and buttons for identity or branding purposes, as demonstrated by Jeremy Frank in his blog post about his recent work for a PBS new series based on nature. Altogether, the effect is pretty simple to achieve with just two lines of code and the PNG-24 texture image. Here’s the code:

.grit {
 -webkit-mask-image: url("grit.png");
 mask-image: url("grit.png");
}

That’s it! However CSS mask is only supported in modern browsers. To learn more and see the demo, hit the buttons below.

View More   View Demo