# Gradient Color Usage

**URL:** <https://community.sitejet.io/t/gradient-color-usage/1369>\
**Category:** Website Builder\
**Tags:** cms\_code\
**Created:** [January 24, 2022, 10:58am UTC](https://community.sitejet.io/t/gradient-color-usage/1369 "2022-01-24T10:58:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ahsan\_Iqbal](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/ahsan_iqbal/32/873_2.png) [@Ahsan\_Iqbal](https://community.sitejet.io/u/Ahsan_Iqbal)\
**Post date:** [January 24, 2022, 10:58am UTC](https://community.sitejet.io/t/gradient-color-usage/1369/1 "2022-01-24T10:58:53Z")

</div>

Hi, I want to use the gradient colour for the headline. please let me know how can I use it.

---

<div class="post-metadata">

**Author:** ![Martin.Sitejet.Team](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/martin.sitejet.team/32/25_2.png) [@Martin.Sitejet.Team](https://community.sitejet.io/u/Martin.Sitejet.Team)\
**Post date:** [January 24, 2022, 4:25pm UTC](https://community.sitejet.io/t/gradient-color-usage/1369/2 "2022-01-24T16:25:19Z")

</div>

Hi @Ahsan_Iqbal,

this is possible with some custom CSS.

First you add the CSS to Asset Manager \</\>

```auto
.text-color-gradient {
 background-image:linear-gradient(90deg,yellow,red);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

```

You can adjust the linear-gradient parameters, this is just an example.

Next, you add the CSS class to the headline element:

 ![Screen Shot 2022-01-24 at 17.20.13](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/426d9ef04950abfb3df5cccc7b7f61ff1514268a.png)

At the end, you can enjoy your text color gradient:

 ![Screen Shot 2022-01-24 at 17.20.49](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/10f8606df40678e32fc24c268b11e9461bc5bc14.jpeg)

---

<div class="post-metadata">

**Author:** ![Ahsan\_Iqbal](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/ahsan_iqbal/32/873_2.png) [@Ahsan\_Iqbal](https://community.sitejet.io/u/Ahsan_Iqbal)\
**Post date:** [January 24, 2022, 4:32pm UTC](https://community.sitejet.io/t/gradient-color-usage/1369/3 "2022-01-24T16:32:03Z")

</div>

Thanks for your guidance 😊

---

<div class="post-metadata">

**Author:** ![Martin.Sitejet.Team](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/martin.sitejet.team/32/25_2.png) [@Martin.Sitejet.Team](https://community.sitejet.io/u/Martin.Sitejet.Team)\
**Post date:** [January 24, 2022, 4:43pm UTC](https://community.sitejet.io/t/gradient-color-usage/1369/4 "2022-01-24T16:43:02Z")

</div>

You can also add more colors e.g. linear-gradient(90deg,yellow,#fff,blue,red);

and you can use hex color codes.

---

<div class="post-metadata">

**Author:** ![Ahsan\_Iqbal](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/ahsan_iqbal/32/873_2.png) [@Ahsan\_Iqbal](https://community.sitejet.io/u/Ahsan_Iqbal)\
**Post date:** [January 25, 2022, 1:47am UTC](https://community.sitejet.io/t/gradient-color-usage/1369/5 "2022-01-25T01:47:15Z")

</div>

Thanks, I used it.