CSS Texture Effect the Easy Way

css-texture-effect-joashpereira
Instead of creating a texture effect text with Photoshop and then using as an image in a website, you can now create textured text using CSS3. There are different ways to achieve this effect,  from CSS background-clip and mask-image, to SVG and even canvas. I will be achieving the texture effect with masking a an image.

Download any of texture image

texture

smooth-texture

rough-texture

rough-texture

With the above images, the areas with transparency will mask the element. While opaque areas of any color will allow the element to be visible.

All you need is two lines of code:

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

The best part of this technique is that, it is very flexible. You can be apply to elements of any color, and the background will show through! Best element suited for this texture effect is a button.

View Demo on Codepen