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

[jsnkuhn]

The new/experimental background-clip value of border-area included in some of these tests seems to make this less likely to get accepted.

[jsnkuhn]

Metrics from Chrome Status:

background-clip is used on 37% of page loads. This is much higher than I expected.
https://chromestatus.com/metrics/css/timeline/popularity/23

-webkit-background-clip is around 8%
https://chromestatus.com/metrics/css/timeline/popularity/178

not sure if there's a way to get specific numbers for the text value

[progers]

The new/experimental background-clip value of border-area included in some of these tests seems to make this less likely to get accepted.

@jsnkuhn , can you help me understand this? I think this proposal is just about background-clip: text, and would exclude border-area (#881)?

[jsnkuhn]

This is specifically regarding the the lack of existing tests for multiple background-clip values that don't include border-area.

This sort of case as mentioned in the Firefox bug from the OP:

background-image: linear-gradient(), linear-gradient();
background-clip: text, border-box

In this case one of the gradients would be being used as a "text fill" and the other as an actual background-image. There is, as far as i can tell, no test for this. But there exists a similar test for multiple backgrounds/clips that included border-area:

https://wpt.fyi/results/css/css-backgrounds/background-clip/clip-border-area-multiple-backgrounds.html?label=master&label=experimental&aligned&q=background-clip

So something similar without the border-area would probably need to be created to cover this?

A similar issue exists with a lack of tests for a background-image: none to add a separate background-clip values for an image and the background-color.

background-color: red;
background-image: linear-gradient(), none;
background-clip: text, border-box

Here again the gradient is applied as a text fill and the image value of none is needed to include a clipping value for the background-color