CSS Mask
comment 0

Create Beautiful Texture Using CSS Mask

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

Filed under: CSS

About the Author

Posted by

Sani Halid is a front-end developer at Stampede and is committed to clean and elegant code. Yet another gamer to join the pack, Sani is also the Editor at Constructs where he shares his daily CSS findings and other front-end development goods.

Leave a Reply