CSS Gradient Text

You have probably seen a landing page or website that uses a gradient color for its text, like this:

In this tutorial, I'll show you how to do it and how to add a color animation when the user hovers over the text.

HTML Structure

Here is the basic structure in HTML:

<h2 class="text-gradient">Buy our great product!</h2>

As you can see, we've added the text-gradient class to the affected element.

CSS

Here are the CSS rules we apply to this element:

.text-gradient {
  background: linear-gradient(to bottom right, #05dbf2, #7d17d1);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 4rem;
  line-height: 1.2;
  transition: 0.3s;
}

• The background property with a linear-gradient value defines the background image of the element (by the way, you can also use an image here).
• The -webkit-background-clip: text; declaration clips the background image to the shape of the text.
• The color property with a transparent value makes the text transparent, rendering only the background gradient visible through it.

Animation

The following CSS adds a filter (which changes the hue/tint in this example) to the element when the user hovers over it.

.text-gradient:hover {
  filter: hue-rotate(30deg);
}

Practice

As an extension or improvement to this project, you can try using an image as the background. You can also experiment with the CSS @property at-rule to animate gradients, like this:

@property --color-start {
  syntax: "<color>";
  inherits: false;
  initial-value: #05dbf2;
}

@property --color-end {
  syntax: "<color>";
  inherits: false;
  initial-value: #7d17d1;
}

.text-gradient {
  background: linear-gradient(
    to bottom right,
    var(--color-start),
    var(--color-end)
  );
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: --color-end 0.3s, --color-start 0.3s;
  font-size: 4rem;
  line-height: 1.2;
}

.text-gradient:hover {
  --color-start: #7d17d1;
  --color-end: #05dbf2;
}

I hope you liked this mini-tutorial.

Source

You can find the source code here.