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

Melt of the Day: Brisket, Muenster, & Grilled Onions

2 min read

You can't go wrong with brisket. This recipe uses Snow's BBQ, Texas Monthly's #1 Pick, and grilled onions for the perfect brisket and grilled cheese melt.

Lessons Learned in Freelancing

12 min read

If you want to become a freelance web developer, these are the lessons that will help you have a great time working with clients and being effective.

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.