1

Made a linear gradient for my text headers and all of them work perfectly in Chrome, yet they don't show up in Safari. (It seems to still be in Safari but just transparent). Not quite sure what the issue is. I've referenced a countless amount of other posts but none have worked for me. For some reason, it's not even relying on my fallback color, if the linear gradient doesn't work. The best solution would be to make the linear gradient text appear in Safari, but setting a fallback color could also work.

Any help would be much appreciated. Thanks!

h2{
    font-family: 'Inter' , 'Open Sans', Times, sans-serif;
    font-weight: 600;
    font-size:2.5em;
    margin-top: 16px;
    line-height: 180%;
    white-space: nowrap;
  
    background: #1c92d2;
    background: -webkit-linear-gradient(to right, 1c92d2, #fbf8e9);
    background: linear-gradient(to right, #1c92d2, #fbf8e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
<h2>About Me</h2>

Example Image

Levi
  • 53
  • 7

1 Answers1

0

I had the same case with multiple span's in a div. Setting display: block to the div and span's worked for me.

Can you please try to set display: block for your h2 ?

Martin S.
  • 21
  • 7