---
title: "CSS Gradient Text"
description: "Use gradient color as text color and add color animation."
image: "https://mirado.work/img/css-text-gradient/image.jpg"
---

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

<div class='figure-blog-small'>

![Result text gradient](/img/css-text-gradient/result.png)

</div>

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:

```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:

```css
.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.

```css
.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:

```css
@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.](https://github.com/miradontsoa/mirado-blog-demo/tree/main/css/css-text-gradient)

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "CSS Gradient Text",
  "description": "Use gradient color as text color and add color animation.",
  "image": "https://mirado.work/img/css-text-gradient/image.jpg",
  "datePublished": "2022-10-30T00:00:00.000Z",
  "author": {
    "@type": "Person",
    "name": "Mirado Andria",
    "url": "https://mirado.work"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mirado Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://mirado.work/me.jpg"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://mirado.work/blog/css-text-gradient"
  }
}
```