How to achieve gradient text in CSS


Video Transcript

In this short video, we're going to have a look at how we can achieve some gradient text effect and how to use it in LiveCanvas.

So we're going to try to replicate something that looks like this.
You may already have seen this effect a number of times - it’s quite popular nowadays on many websites.
Before we get started, just a little bit about the theory.
So gradient text is possible on the web combining three simple CSS properties.

We're gonna see this by having a look at an article on CSS tricks, a fantastic website, which actually is one of the best resources to learn cool CSS and HTML stuff.

You may have stumbled upon it before.
By the way, Chris Coyier is one of those names you can’t ignore if you are passionate about websites and programming.
I really recommend you reading his articles. And this one is also ten years old - but still relevant!

Let's have a look at the code snippet.
Let’s just ignore the “font-size” property which is not important for the effect.
We have the “background” property, where a gradient is defined.
But the magic happens with the last two properties, the ones with the webkit prefix: webkit text fill and webkit text stroke.
Unless you’re a CSS ninja, you may never have heard of them.
So the first question would be: Can those properties be safely used?
If you have a look at the “Can I use” website, you can see that the “text-fill” property is actually supported pretty well on all browsers except Internet Explorer, which is quite dead anyway.
And also the “background clip” property has great support as well.

So green light! These properties are safe to use, and the effect will work fine even on mobile devices.

So let's have a look at how to do things in practice.

We're going to create a new Live Canvas page draft.

Let's add a demo section.

As you can see, it's quite nice, but….
Let’s make it more peculiar by adding the gradient text effect to the heading.

So I'm going to open the code editor and just try to add some inline style to demonstrate how this can happen.

I'm gonna first copy the three necessary CSS statements from the example on the CSS tricks website.
Pasting inside the “style” definition does immediately deliver the expected results.
Then, we can customize the colors and change the gradient, going from cyan to magenta.
Actually, it looks quite nice.
Great! It’s been really easy.

And of course, if you have something against using inline styling, or need to reuse the effect throughout your site more than one time, you can define a class in the CSS.
Let’s switch to the global CSS panel.
This is some old example code, let’s get rid of it.

Dot gradient dash text would be like this.

And now that we've defined this class, we can just use it every time we want to have this gradient text effect, directly in our HTML.

Okay, thanks for watching. I hope this has been useful. See you next time. Goodbye.