CODEWITHSUNDEEP
htmlcsssafari
o3inc
o3inc

Reputation: 283

Safari doesn't render css gradient text

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?

Upvotes: 14

Views: 15004

Answers (11)

Gabriele Fagnani
Gabriele Fagnani

Reputation: 122

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

Upvotes: 0

Aaron
Aaron

Reputation: 1

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.

Upvotes: 0

Diego
Diego

Reputation: 366

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

-webkit-box-decoration-break: clone;

Upvotes: 4

Hữu Phong
Hữu Phong

Reputation: 1603

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

block or inline-block are fixing the problem

Upvotes: 3

Swifter
Swifter

Reputation: 187

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!

Upvotes: 12

May&#39;Habit
May&#39;Habit

Reputation: 1372

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

Upvotes: 0

Erik P_yan
Erik P_yan

Reputation: 788

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

display: inline-block;

Upvotes: 2

joonas
joonas

Reputation: 161

I found a simple fix for this

.text, span {
 display: block;
}

Upvotes: 16

llahnoraa
llahnoraa

Reputation: 41

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.

Upvotes: 4

user9772439
user9772439

Reputation: 21

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

Upvotes: 2

Raymond
Raymond

Reputation: 11

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.

Upvotes: 1

Related Questions