Safari doesn't render css gradient text

Question

I'm trying to make gradient text in webkit browsers using this CSS code:

.text {
    background: -webkit-linear-gradient(blue, green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

it works perfectly in Chrome, but in Safari (both 8 and 9) it doesn't render gradient text unless you select it via mouse click+drag over it.

HTML is as follows:

<p class = "text">Hello world.</p>

Spent 2 evening on that. Found a lot of recommendations to use this method with couple issues similar to mine and no solutions at all. Would appreciate a lot if someone would help.

IMPORTANT UPDATE:

I've found out, that this code works great when applied to single <p> element, but fails to render in Safari (not in chrome) when applied to div wrapper to single or multiple <p> elements like this:

<div class = "text">    
   <p>First line.</p>
   <p>Second, way longeeeeeeer line. </p>
   <p>Third line, just to see gradient span over multiple lines. </p>
</div>

Any thoughts why this could be the case or how to overcome this?

possible duplicate: [Why do Safari and Firefox seem to incorrectly render my gradient and how can I fix it?](http://stackoverflow.com/questions/26291684/why-do-safari-and-firefox-seem-to-incorrectly-render-my-gradient-and-how-can-i-f) — Michael Benjamin, Aug 19 '15 at 00:17
Ok. I'll test it out on my iPad. Back to you later today (if somebody else doesn't give you a good answer). — Michael Benjamin, Aug 19 '15 at 14:53
Thank you so much. Please, note that I have added important update. — o3inc, Aug 19 '15 at 14:58
So you're saying the gradient works when applied directly to the `
` element, but it doesn't cascade when applied to the `
` container? — Michael Benjamin, Aug 19 '15 at 22:57
That's exactly it. And it cascades down in Chrome or Opera, but not in Safari. — o3inc, Aug 19 '15 at 22:58
Have you considered just applying the `.text` class to the `
` tags? — Michael Benjamin, Aug 19 '15 at 23:06
It would then render same gradient to each single paragraph, not to the whole text. — o3inc, Aug 19 '15 at 23:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/87428/discussion-between-michael-b-and-o3inc). — Michael Benjamin, Aug 19 '15 at 23:24
Yeah, I can see the difficulty you're having. There's absolutely nothing online about gradients failing to cascade onto child elements in Safari. At least nothing I have found (and I've looked!). — Michael Benjamin, Aug 21 '15 at 00:01
I have a couple of workaround ideas. Is this gradient effect something you want to reuse in many places, or just one place? — Michael Benjamin, Aug 21 '15 at 00:03

score 16 · Answer 1 · answered Dec 11 '18 at 15:13

16

I found a simple fix for this

.text, span {
 display: block;
}

answered Dec 11 '18 at 15:13

joonas

161
1
2

score 11 · Answer 2 · answered Jan 22 '21 at 02:36

11

I know it's an old question but in case someone still needs it: I had the same problem and what worked for me was to add a text-shadow to it and make the shadow transparent.

.text {
background: -webkit-linear-gradient(blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px #00000000; <--
}

Note that I added '00' to the end of the HEXA code which leads to transparency if someone doesn't know!

answered Jan 22 '21 at 02:36

Swifter

177
1
8

1

That actually worked for me. – Andre Zimpel Sep 28 '21 at 09:52
Worked for me as well. Small note: `#00000000` is equivalent to `transparent`. – Livven Oct 15 '21 at 10:05

score 4 · Answer 3 · answered Aug 30 '18 at 13:43

4

If you code like this <h1>Discover <span>Something</span></h1> then text gradient won't appear in Safari but does appear fine in Chrome and Firefox.

If you do like this <h1>Discover Something</h1> without span tag then it does work properly. I don't think Safari liked tags inside the tag. Nasty bug. It works on other browsers like Chrome and Safari.

answered Aug 30 '18 at 13:43

llahnoraa

41
1

1

I reported to webkit bug report. Hopefully they'll resolve the issue. – llahnoraa Dec 05 '18 at 14:24

score 4 · Answer 4 · answered May 08 '21 at 04:43

4

If you have a two lines text and in Safari does not works, try:

-webkit-box-decoration-break: clone;

answered May 08 '21 at 04:43

Diego

366
1
7

1

This is the solution that works! It's nice. THANK YOU! – caravana_942 Sep 10 '21 at 22:28

score 3 · Answer 5 · answered Mar 18 '21 at 04:40

3

flex or inline-flex are the problems if you are using it.

block or inline-block are fixing the problem

answered Mar 18 '21 at 04:40

Phong

1,457
14
16

It works for me – isbase Apr 23 '22 at 04:41

score 2 · Answer 6 · answered May 10 '18 at 19:11

This remains a Safari bug as of May 2018. The gradient properly appears if the text is first highlighted, and then unhighlighted.

I was able to use the following alternative:

.text {
  -webkit-mask-image: linear-gradient(blue, green);
}

This is working in Safari 11, iOS Safari 11, Chrome 66, and Firefox 60.

Inspired by https://stackoverflow.com/a/45136579/9772439

score 2 · Answer 7 · answered Apr 06 '20 at 09:40

2

I had the same problem with b tag, and solve it with property

display: inline-block;

answered Apr 06 '20 at 09:40

Erik P_yan

608
5
6

score 1 · Answer 8 · answered Aug 19 '17 at 06:29

I had the same issue and it looks like it's a Safari bug. I noticed that the issue only happens when your cascading elements are block types.

My hack for this went like this

    <div class = "text">    
        <span>First line.</span>
        <p></p>
        <span>Second, way longeeeeeeer line. </span>
        <p></p>
        <span>Third line, just to see gradient span over multiple lines.</span>
        <p></p>
    </div>

The only reason I have the paragraph tags is for spacing since adding a display block on the spans will trigger the bug again.

score 0 · Answer 9 · answered Jun 30 '20 at 08:58

0

For me, the easiest way to archive this is drawing text as image, contain shadow... And put it in background css.

answered Jun 30 '20 at 08:58

May'Habit

1,334
12
18

Image as vectorised .svg ? If only as .png or .jpg then it won't be so sharp as text around it. – Trunk Jul 21 '20 at 15:22
svg for sure, I've never thought about jpg – May'Habit Jul 22 '20 at 10:35

Aaron · Answer 10 · 2021-10-04T16:09:27.643

0

If you have tried all of the above and none are working, check to see if you have a Pseudo element on the tag.

Safari doesn't like it if these are static so you'll need to position them absolute.

edited Oct 04 '21 at 16:09

answered Oct 04 '21 at 16:07

Aaron

1
1

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 04 '21 at 16:08

score 0 · Answer 11 · answered Nov 23 '21 at 17:20

0

I have the same issue, for fix it use attribute display with the property "inline" or "inline-block" to the main element, in your case p.text

answered Nov 23 '21 at 17:20

Gabriele Fagnani

112
12

Safari doesn't render css gradient text

11 Answers11

Linked