From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Gradient text

Gradient text - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Gradient text

“

- [Chris] Hi, this is Chris Converse, and in this episode we'll create a CSS gradient and clip it into the shape of our headline using the background clip property. Now it is worth mentioning that this technique works in all modern browsers and devices. However, it is completely unsupported in Internet Explorer 11. So if you need to support IE 11, you should not use this technique as the text will be unreadable by your viewers. So if you'd like to continue and follow along with me, download the exercise files and let's begin by opening the HTML file in a text editor. And so when you had the HTML file open, you'll see up in the head area, we have a link to style.css. We'll be opening this in a moment. And in the body area we have an h1 with the text of sunset. So it's this h1 tag that we're going to be adding the gradient into the background of and then clipping that background based on the characters inside of this heading. So in order to do that, let's go back to the exercise files…

Contents