Text Backgrounds and Gradients with background-clip

Today we’ll be looking at a fun technique to spice up our text, specifically our headers.

With this technique, we will be able to place a background image or gradient on our text. Even better, we are able to animate it!

background-clip-text

Be sure to check out the demos to see the different techniques available.

The CSS Technique: background-clip:text

The technique is very simple to implement. We just need to add a background (can be a gradient or image) to the text we want to affect. Then we just add the following lines:

h1 {
  background:url(image_url_here);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}    

That’s all there is to it!

It is important to note that this technique only works in -webkit- browsers. Divya Manian has a great write-up on a CSS fallback.

Let’s go ahead and create our demos now.

Getting Started

Here is the foundation HTML for our demos. We just need an h1 tag.

<h1>"The moment you doubt whether you can fly, you cease for ever to be able to do it." <small>- J.M. Barrie</small></h1>

Here’s the foundation CSS that we’ll need also:

@import url(http://fonts.googleapis.com/css?family=Chango);

body {
  padding-top:50px;
}

h1 {
  font-family:'Chango';
  font-size:50px;  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

We are just centering things and grabbing a Google Font that gives our text a lot of room to show off its background.

Now let’s get on to each specific demo.

Images are taken from unsplash

Since this demo will only work in -webkit-, we’ll just be focusing on those prefixes. In production, you’ll want to be sure to support all browsers and have fallbacks.

Demo 1: Background Image Hover Animation

The things that we need to do in this demo are:

  • change body background image
  • add background image to text
  • set hover change

Here’s the full code for this:

@import url(http://fonts.googleapis.com/css?family=Chango);

body {
  padding-top:50px;
  background:url(https://cask.scotch.io/2014/11/broken-plane.jpg);

  /* make our image 100% width */
  background-size:cover; 
}

h1 {
  font-family:'Chango';
  font-size:50px;  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* set the background image */
  background:url(https://cask.scotch.io/2014/11/mountain1.jpg);
  background-position:bottom;
  background-size:cover;

  /* set the transition speed */
  transition:2s ease all;
}

/* handle what happens on hover */
h1:hover {
  background-position:top;
}

And that’s it! We set the transition and what happens on hover so now our background will make its move as we hover. Try changing out the transition time and background images to see what kind of effect you can create.

Demo 2: Animating a Gradient

The only difference in this demo is that we will use a gradient and an animation to make the entire gradient background move.

Here’s the code for this demo:

@import url(http://fonts.googleapis.com/css?family=Chango);

body {
  padding-top:50px;
  background:url(https://cask.scotch.io/2014/11/person.jpg);

  /* make our image 100% width */
  background-size:cover; 
}

h1 {
  font-family:'Chango';
  font-size:50px;  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* set the background gradient */
  background:-webkit-linear-gradient(top, #2c539e 0%,#37AAC6 50%,#2c539e 100%);

  /* set the animation */
  -webkit-animation:moving 20s ease infinite;
}

/* create the animation */
@-webkit-keyframes moving {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 500px;
  }
}​

That’s it! Now we have a really annoying glowing gradient text. We’ve made it this annoying for the demo, but this could be used for a very subtle effect.

Demo 3: Animating a Background Image

We’ll be using the same animation here that we used in demo 2. Here’s the code for this demo:

@import url(http://fonts.googleapis.com/css?family=Chango);

body {
  padding-top:50px;
  background:url(https://cask.scotch.io/2014/11/silhouette.jpg);

  /* make our image 100% width */
  background-size:cover; 
}

h1 {
  font-family:'Chango';
  font-size:50px;  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* set the background gradient */
  background:url(https://cask.scotch.io/2014/11/galaxies.jpg);
  background-size:cover;

  /* set the animation */
  -webkit-animation:moving 20s ease infinite;
}

/* create the animation */
@-webkit-keyframes moving {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 500px;
  }
}​

This is the most subtle of our 3 demos, and has a neat effect of the space background.

Conclusion

It’s a very simple technique, that if used correctly, could yield a subtle and powerful effect. Use your imagination and see the cool things that background-clip:text will let you create.

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.