Applying An Image Texture On Text With HTML And CSS

How can I put an image texture on text in HTML?

This is the ultimate guide to adding texture on text in an HTML page.

In one of my old post I shared the glossy button CSS code, but that was very basic CSS coding. In this tutorial I will show you some more advanced CSS and JavaScript techniques to create visual effects.

So, you have an HTML page with a big nice title. You could make it nicer by putting a texture or pattern on top of text in HTML.

apply texture on text with css html canvas svg

How do you do that?

This post I will show a few CSS tricks that will allow you to get nice textured text effects with minimal effort.

For this we will use a couple of seamless and non-seamless textures that you can download for free:

Let’s get started.

Method 1 – Using the CSS background-clip property

There’s no CSS property for an HTML text element where you can indicate placing a texture on text.

Then, how do we apply an image to the text?

We’ll actually need a background layer where the image is set as the background and a foreground layer where the text sits. Then, using CSS we instruct the browser to clip a portion of the background using the shape of the text in front.

Create an HTML file and add:

<h1 class="lava-text">LAVA TEXT</h1>

Also, create a CSS file, include it in your HTML file and add the following code:

.lava-text {
 background: url(http://www.textures4photoshop.com/tex/thumbs/lava-magma-seamless-texture-free-download-70.jpg) no-repeat center center;
 background-size: cover;
 color: #fff;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 -moz-background-clip:text;
 background-clip:text; 
 font-family:Catamaran,sans-serif;
 font-size:10em;
 padding:0;
 margin:0;
 text-align:center;
 -webkit-text-stroke: 3px #ffaa00;
}

And here’s the result:

lava texture on text html css

See the Pen Lava Text Effect by Ion Emil Negoita (@inegoita) on CodePen.16997

Want to use a different texture? Simply change the background property to your image.

Here’s the result using the wood texture:

wood text with texture

Download wood textures for free and try different types of wood texture with this text.

And with some minor CSS modifications and the watercolor texture:

 background: url(http://www.textures4photoshop.com/tex/thumbs/watercolor-paint-background-free-thumb32.jpg) repeat center center;  background-size: 20%;

watercolor text with texture

Method 2 – Using svg clippath to add texture to text

SVG can be very useful sometimes for creating text effects. Let’s see how we can add the textures to a text.

We will put in the background image as a simple img element and add a SVG text element inside a clippath element. clipath elements allow using SVG elements as kind of a mask.

Here’s the HTML code:

<img class="svg-clip" src="http://www.textures4photoshop.com/tex/thumbs/lava-magma-seamless-texture-free-download-70.jpg"/>  <svg height="0" width="0">  <defs>  <clippath id="svgPath">  <text x="0" y="200" textLength="800" lengthAdjust="spacing" font-family="Catamaran" font-size="10em"> LAVA TEXT </text>  </clippath>  </defs>  </svg>

and the CSS code that instructs the image to use the SVG text as a mask:

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

This is the end result

lava text using svg

See the Pen Lava Text Effect Using SVG by Ion Emil Negoita (@inegoita) on CodePen.16997

One advantage of this method is that you can use any vector shape as a mask for the texture, not only text.

Method 3 – Using svg fill to add a pattern to text

This method is similar to the previous method using svg.

The difference is that instead of clippath we will now use a fill image for our text. For this we will need to define a pattern element and an image inside.

Here’s the code:

<svg width="100%" height="100%">  <pattern id="pattern" patternUnits="userSpaceOnUse" width="100%" height="100%">  <image xlink:href="http://www.textures4photoshop.com/tex/thumbs/graffiti-wall-texture-free-1-thumb28.jpg"></image>  </pattern>  <text x="0" y="0.8em" width="100%" textlength="650" class="headline" style="fill:url(#pattern);">Grafitti</text> </svg>

That’s it. You can change the font used by specifying it in the CSS. Here’s the end result and the full code:

add grafitti texture on text with svg

See the Pen Grafitti Textured Text Using SVG fill by Ion Emil Negoita (@inegoita) on CodePen.16997

Method 4 – Using mask-image with a PNG texture to create a stamp text effect

For this method you will need a texture with transparency. So, something like this grunge PNG grunge texture will work just fine.

The HTML code for this method of applying texture to a text is similar with the other methods:

<div>  <h1 class="stamp-text">STAMP CSS</h1> </div>

But the CSS is slightly different as we will make use of the mask-image CSS property:

h1{  font-size:7em;  color:red;  display:inline-block;  font-family:sans-serif;  padding:10px 20px;  margin:40px;  transform:rotate(-5deg); } .stamp-text{  border:10px solid red;  -webkit-mask-size: contain;  -webkit-mask-image: url("http://www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");  -o-mask-image:url("http://www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");  -moz-mask-image:url("http://www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");  -ms-mask-image:url("http://www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");  mask-image: url("http://www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png"); }

The mask-image property indicates an image with transparency that will act as a mask. So, where it image is transparent the element on which the mask is applied will also be transparent.

For the H1 element I added a slight rotation to give it more of a stamp text effect. The end result and the full code looks like this:

stamp textured text css

See the Pen Stamp Texture Text CSS Effect by Ion Emil Negoita (@inegoita) on CodePen.16997

Method 5 – Adding texture on text with canvas and a little JavaScript

With this method we’ll have to use a bit of JavaScript and some creativity. Don’t worry, it’s only a few lines.

The idea is to create an HTML5 canvas and draw the text with a texture. To make things more convenient, we are going to use CSS to configure the texture image. Also, the text we are going to draw in the canvas will be taken from the canvas element itself. We can place text in the canvas element because the browser will just ignore it.

Here’s the HTML code:

<canvas id="canvas" width="1000" height="300" >  ROCK TEXT </canvas>

To which we add this simple CSS code:

canvas{  font-size:10em;  font-family:sans-serif;  font-weight:bold;  background-image:url(http://www.textures4photoshop.com/tex/thumbs/rocky-mountain-texture-seamless-thumb31.jpg);  background-size:0 0; }

The font and background settings do not affect the canvas directly.

We will use them in the JavaScript code. So, if we will want to change the font or texture image we will only change the CSS.

Notice that I set the background-size to 0. I did that because I don’t want the canvas to have a background. I only need the background-image property to use in the CSS.

The real magic happens in the JavaScript code:

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var img = document.createElement("img"); img.src=window.getComputedStyle(canvas).backgroundImage.slice(4, -1).replace(/"/g, ""); img.onload= function(){  drawText(); } function drawText() {  ctx.font = window.getComputedStyle(canvas).font;  ctx.fillStyle = ctx.createPattern(img, 'repeat');  ctx.textAlign = 'center';  var x = canvas.width/2, y=0;   ctx.fillText(canvas.textContent, x,200);  ctx.fill(); }

The code is rather simple. We use getComputedStyle to grab the texture image and the font information from the CSS.

We then simply load the image, and when it’s loaded we use fillText to write the text using the image as a pattern. The text that we write on the canvas is taken from the canvas element using canvas.textContent.

That’s it! And the result looks like:

rock texture on text using canvas

See the Pen Rock Textured Text Using Canvas by Ion Emil Negoita (@inegoita) on CodePen.16997

Conclusion

Congratulations! You’ve just learned how to add texture on text using CSS and HTML.

John Negoita

View posts by John Negoita
I'm a Java programmer, been into programming since 1999 and having tons of fun with it.
[jetpack-related-posts]

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top