Safari webkit-text-fill-color does not render in Flexbox

Cole Turner
Cole Turner
1 min read
Cole Turner
Safari webkit-text-fill-color does not render in Flexbox
Blog
 
LIKE
 
LOVE
 
WOW
 
LOL

Using -webkit-text-fill-color is a great way to creating that knockout text effect, where you can render a gradient as the color. Take the following example:

Preview of text with webkit-text-fill-color

The desired effect is for the gradient to flow across the text element. However I noticed, while redesigning this website, that sometimes it can result in rendering transparently, or nothing appears.

<div class="parent">
   <div class="child">Gradient color text!</div>
</div>

Using CSS, `.parent` is given the following style:

.parent {
  background: linear-gradient(
    to right,
    red 0%,
    blue 50%,
    green 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

This will result in text that is given a gradient color. However, if `.child` is rendered using Flexbox, this will cause Safari to render the text transparently.

// This won't work, Safari will render transparently.
.child {
  display: flex;
}

.parent {
  background: linear-gradient(
    to right,
    red 0%,
    blue 50%,
    green 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Instead, switch the flexbox properties to the parent container. This will allow you to use flexbox, while preserving the knockout text effect in Safari.

It is probably safe to say that any node with the -webkit-text-fill-color property should only have a text node as children.

Enjoy using the knockout text effect, using a gradient or a color fill on text!

 
LIKE
 
LOVE
 
WOW
 
LOL

Related Tags

User InterfaceCSS

More Stories

Why I Don't Like Take-Home Challenges

4 min read

If you want to work in tech, there's a chance you will encounter a take-home challenge at some point in your career. A take-home challenge is a project that you will build in your free time. In this post, I explain why I don't like take-home challenges.

Standing Out LOUDER in the Technical Interview

5 min read

If you want to stand out in the technical interview, you need to demonstrate not only your technical skills but also your communication and collaboration skills. You need to think LOUDER.

See more posts

Read it before anyone else. Subscribe to my newsletter for early access to the latest news in software engineering, web development, and more.