3

I'm trying to make a gradient text using CSS. It currently works in Chrome and Firefox, but on Safari I get strange lines outside the border box.

My CSS looks like this...

h1 {
    font-family: "Work Sans", Helvetica, Arial, sans-serif;
}

.highlighted {
    color: transparent;
    background: linear-gradient(90deg, #FF008B, #FF006B);
    background-clip: text;
    -webkit-background-clip: text;
}

My HTML is just a simple...

<h1>Welcome to <span class="highlighted">My site</span></h1>

But on Safari it renders like this.

enter image description here

Can anyone help me fix those lines?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Trenskow
  • 3,783
  • 1
  • 29
  • 35

1 Answers1

5

You can try clip-path to fix it:

h1 {
  font-family: "Work Sans", Helvetica, Arial, sans-serif;
}

.highlighted {
  color: transparent;
  background: linear-gradient(90deg, #FF008B, #FF006B);
  -webkit-background-clip: text;
          background-clip: text;
  padding: 1px;
  clip-path: inset(1px);
}
<h1>Welcome to <span class="highlighted">My site</span></h1>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415