Two Brainy.
Dark Mode

Why doesn't background-clip: text work in Safari?

How to get fancy text gradients in Safari on iOS and MacOS.

🗓 7th June 2021

227 words • a year ago1 minute read time

Hi there intrepid web developer!

Well done on using your prodigous googling skills to end up here.

No doubt you’ve been tearing your hair out trying to get your lovely text gradients, which work perfectly in Chrome and Firefox, to work on Safari on both iOS and MacOS.

Well the good news is, I know how to fix it. You’ll know this if you’re reading this blog in Safari, as I’m using fancy text gradients right now.

The fix

I’ll just get on with it, here’s the issue with text not rendering in Safari when using background-clip:

The property background-clip: text; only works in Safari when applied directly to the element you want styled. You cannot apply it to a parent element and style all children at once. (This does work in Chrome and Firefox)

Let’s take the CSS for the h2 and h3 tags on this very site as an example:

.blog-content h2 {
  background: linear-gradient(to right, #fc5404 20%, #f9b208 70%, #fc5404 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Some animation code */
}

This will work in safari because we’re targeting a singular element we’d like to style.

A combination like this, will not work in Safari:

.blog-heading {
  background: linear-gradient(to right, #fc5404 20%, #f9b208 70%, #fc5404 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Some animation code */
}
<div class="blog-heading">
  <h1>My title</h2>
  <h2>My Subtitle</b2>
</div>

To refactor this to support Safari, we might do something like this:

.gradient-text {
  background: linear-gradient(to right, #fc5404 20%, #f9b208 70%, #fc5404 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Some animation code */
}
<div class="blog-heading">
  <h1 class="gradient-text">My title</h2>
  <h2 class="gradient-text">My Subtitle</b2>
</div>

OK if you’re in Safari, you can play with the bug using React components and Theme-UI styling, to see it working, or… not working:

Hello

It should say "hello" above.


And that, hopefully, is that.

Let me know on Twitter if I helped you out.

Ciao for now x

Did you this article?

Did you read all of this? Would you like to me a send you a two-line, text-only, e-mail when I post something new?

Fair warning: I write about a broad set of topics. Filter them below:

Build solid frontends quickly

You're a React or React Native developer, you want me to send you advanced coding thoughts and fixes.

Increase your uptime

You're a solo-developer or run a small team - you want to know how to run apps and functions at scale using the cloud.

Enjoy work more

You're a generalist professional interested in knowledge working, management, and the future of work.

En-jazzen your life

You're a creative, interested in writing, music, and generative art - you want to read my relatively niche thoughts.

HomeNewsletterTwitter
Privacy Policy
Terms of Use
© 2022 Two Brainy