Web Wish 20: Text Fill

If you need a text with a fill, you can always put that fill in the background, clip the background to the text, and make the text transparent so that the clipped background becomes visible.

It works across all modern browsers.

background-image: linear-gradient(to bottom in oklch, blue, red);
background-clip: text;
color: transparent;

Text with a gradient background fill

But, if you use text-shadow on the element, you might be in for a surprise. The “text” you see is a clipped background, and the text-shadow will be painted on top of it.

background-image: linear-gradient(to bottom in oklch, blue, red);
background-clip: text;
color: transparent;
text-shadow: 1px 1px 0 black;

Text with a black text-shadow on top

The CSS Fill and Stroke Module defines a fill-image property that would let you fill the text properly, so that it would work in combination with the text-shadow property. As far as I know, none of the browsers implement this property for inline text elements.

Today I'm wishing for browser implementers to support the fill-* properties for inline text.

Relevant issues and PRs:

• text-shadow paints on top of text styled with background-clip: text;