Trick for adding texture to your text with CSS and SVG

In Photoshop we use image background to text . You can then use that text as an image on your website. 
But now CSS has introduced properties like background-clip and mask-image which you can use to create similar effects to those you’re creating in Photoshop. On top of that, you could also use SVG to clip an image with text.

Browser support

All browser doesn't support background clip universally but they will fail in browsers like IE and Firefox. But in future version of browser will support this.

Clipping text using SVG

The next technique we’ll look at is SVG clipping. Similar to the CSS method above, SVG also allows you to clip text with images using the clipPath property. Usually the clipPath property contains shape attributes such as a circle or square, but you can also use text.

The SVG

You’ll see that I use the HTML image element to clip the image.

<img class="svg-clip" src="images/green.jpg"/>
        <svg height="0" width="0">
            <defs>
                <clippath id="svgPath">
                    <text x="175" y="420" textLength="1000"  lengthAdjust="spacing" font-family="Lemon" font-size="240px"> SVG Text </text>
                </clippath>
            </defs>
        </svg>

Although I’m using a .jpg here, you can use other image formats, or even video.

The CSS

Now, all we have to do is use the clip-path property to apply the SVG as the image’s clip path:

.svgClipped {
    -webkit-clip-path: url(#svgPath);
    clip-path: url(#svgPath);
    margin:0 auto;
}

Here’s the result: