background-clip: text

[thebabydino]

Description

This is now supported unprefixed and in the shorthand in all browsers, but bugs still remain.

Most notable ones, both related to multiple background layers:

• Firefox 🪲 1481498 - if one background-clip value is text, but not all of them are, the result is incorrect.
• Safari 🪲 267129 - if we have at least one background layer clipped to text, this breaks background-blend-mode

The majority of my most common uses for background-clip: text involve blending two background layers out of which only one is clipped to text.

So I most commonly have to resort to an absolutely positioned pseudo-element covering its parent. The pseudo then gets blended with its parent's text content.

This can be problematic for inline elements like links. Let's say we want an on :hover/ :focus XOR effect created with the difference blend mode. All is fine if the link doesn't wrap.

:hover case scenario

But if the link wraps, we have a problem.

the problem with multi-line links

To get around this, I have to make the link inline-block. Which also breaks when the link is wider than is container. To also avoid that problem, I need to wrap the link text inside a span which I then blend with the actual link. Which works, but isn't ideal.

Specification

CSS Backgrounds and Borders Module Level 3

Additional Signals

No response

[gsnedders]

https://wpt.fyi/results/css/css-backgrounds?label=master&label=experimental&aligned&q=clip is probably a decent starting point