# CSS - linear-gradient background not showing

**URL:** <https://community.hubspot.com/t/css-linear-gradient-background-not-showing/36638>\
**Category:** CMS Development\
**Created:** [May 4, 2021, 2:41am UTC](https://community.hubspot.com/t/css-linear-gradient-background-not-showing/36638 "2021-05-04T02:41:29Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![TYu](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tyu/32/31851_2.png) [@TYu](https://community.hubspot.com/u/TYu)\
**Post date:** [May 4, 2021, 2:41am UTC](https://community.hubspot.com/t/css-linear-gradient-background-not-showing/36638/1 "2021-05-04T02:41:29Z")

</div>

We used linear-gradient as background-image for the header.

When every words fit into 1 line, it shows up as we want (photo1)

But the problem is that when the size of the word is larger, the second line just disappear.

 ![41964i5F424E12A039E739.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/0/d0b2b22a30f046a745d6ec4cd8b7d565cd753c91.png)

 ![41965iC71ED4CF9735AEEF.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/8/280765dc98112173b683775b17e350a6e7e8e7f2.png)

Any one has any ideas ? Thanks a lot!

Here’s the code in the module:

```lia-code-sample
.custom-leaders .top-content h2 span{
color: rgb(5, 204, 152);
text-shadow: rgba(255, 255, 255, 0.2) 0px 2px 3px;
}

@supports (-webkit-background-clip: text) or (-moz-background-clip:text) or (background-clip:text) {
.custom-leaders .top-content h2 span{
background-image: linear-gradient(to top, rgb(22, 173, 248), rgb(120, 217, 244));
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
}

```

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [May 4, 2021, 7:12am UTC](https://community.hubspot.com/t/css-linear-gradient-background-not-showing/36638/2 "2021-05-04T07:12:13Z")

</div>

Hi @TYu,

could you provide a preview link please? It’s kinda hard to test things just from code 😏

You could try to remove

`color: transparent;`

from the @support media query in the meantime

best

Anton

---

<div class="post-metadata">

**Author:** ![TYu](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tyu/32/31851_2.png) [@TYu](https://community.hubspot.com/u/TYu)\
**Post date:** [May 4, 2021, 7:37am UTC](https://community.hubspot.com/t/css-linear-gradient-background-not-showing/36638/3 "2021-05-04T07:37:47Z")

</div>

Thanks for your reply Anton!

Currently I modify the size of the header to let it appear normally.

To re-produce this issue:

1. Go to this link with Safari [https://www.palo-it.com/es/events/ideathon-4-good-techo](https://www.palo-it.com/es/events/ideathon-4-good-techo)

2. Then you right click to Inspect Elements

3. Scroll down to find the element as attached image 1. Click on it and check the style, you’ll see the font-size is 1.7rem (see image1);

4. Change the size to 3rem to make it larger so it’ll need to occupy two lines. Then you’ll see the second line appear werid (see image2).

image1

 ![41983i1243ED7DB1EE5653.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/9/0965a854cbca1361e10157424517fcfceb66f6b2.png)

image2

 ![41984i4F33F2820755C4D3.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/0/e0d3f52e8b2edeac41ee9d1da7333b22dbd138db.png)

Let me know if this is clear, thank you 🙂

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [May 4, 2021, 11:05am UTC](https://community.hubspot.com/t/css-linear-gradient-background-not-showing/36638/4 "2021-05-04T11:05:15Z")

</div>

Hi @TYu,

I’ve tested your page on my Windows machine in Chrome, Firefox, Edge and IE(worst possible browser imo)

result: I couldn’t recreate this issue.  
On my mac on the other hand Safari was displaying the issue as you’ve described.

Adding a “display: block” to the corresponding class fixed the issue in Safari.

```lia-code-sample
@supports (-webkit-background-clip: text) or (-moz-background-clip:text) or (background-clip:text) {
.custom-leaders .top-content h2 span{
background-image: linear-gradient(to top, rgb(22, 173, 248), rgb(120, 217, 244));
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
display:block;
}
}

```

best,

Anton

---

<div class="post-metadata">

**Author:** ![TYu](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tyu/32/31851_2.png) [@TYu](https://community.hubspot.com/u/TYu)\
**Post date:** [May 4, 2021, 11:35am UTC](https://community.hubspot.com/t/css-linear-gradient-background-not-showing/36638/5 "2021-05-04T11:35:32Z")

</div>

Hi @Anton ,

Your suggestion works!

Thanks a lot!

Best,

Tin

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [May 6, 2021, 12:32pm UTC](https://community.hubspot.com/t/css-linear-gradient-background-not-showing/36638/6 "2021-05-06T12:32:51Z")

</div>

Hi @TYu ,  
I have checked that the code has provided is working on my end. Check this SS [Screenshot by Lightshot](https://prnt.sc/12griov) .  
Can you share the link with us so that we can check whats the issue here?  
Best Regards.

---

<div class="post-metadata">

**Author:** ![TYu](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tyu/32/31851_2.png) [@TYu](https://community.hubspot.com/u/TYu)\
**Post date:** [May 7, 2021, 3:41am UTC](https://community.hubspot.com/t/css-linear-gradient-background-not-showing/36638/7 "2021-05-07T03:41:53Z")

</div>

Hi webdew,

The solution from Anton work well.

Here’s the link I had issue before:

[https://www.palo-it.com/es/events/ideathon-4-good-techo](https://www.palo-it.com/es/events/ideathon-4-good-techo)

Thanks!