CSS background-clip

[jsnkuhn]

Description

mdn:

The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

Most existing inconsistencies seem to revolve around the text value.

The original webkit blog post for adding -webkit-background-clip: text;: https://webkit.org/blog/164/background-clip-text/

Specification

https://drafts.csswg.org/css-backgrounds-4/#background-clip

Open Issues

No response

Tests

https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=background%20clip

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

No response

Browser bug reports

firefox bugs:
https://bugzilla.mozilla.org/buglist.cgi?quicksearch=background-clip&list_id=16739518

[meta] background-clip:text issues
https://bugzilla.mozilla.org/show_bug.cgi?id=1656784

https://bugzilla.mozilla.org/show_bug.cgi?id=1481498

chrome:
Issue 1339290: Make -webkit-background-clip an alias
https://bugs.chromium.org/p/chromium/issues/detail?id=1339290&q=background-clip%20text&can=2

New chrome bug around how background-clip: text; works with position: https://bugs.chromium.org/p/chromium/issues/detail?id=1500148

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

No response

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[thebabydino]

Use case: a :hover/ :focus effect for links

The best way to do this is by having two background layers, one clipped to text and one to the border-box. The second layer is non-repeating vertically (only repeat-x), attached to the bottom (background-position: 0 100%) and initially occupies only a short box (something like background-size: 1% 3px).

On :hover/ :focus, the second layer grows upwards to fill the entire border-box (background-size: 1% 100%) and the two layers get XOR-ed using background-blend-mode: difference (live demo).

The Firefox bug, which means the top layer's background-image is set across the union (and I'm using the word in the mathematical/ set theory sense) of the areas occupied by all layers, makes this technique fail (because the intersection of the two layers becomes the entire area occupied by the bottom layer).

A workaround would be to use an absolutely positioned pseudo and mix-blend-mode instead of the bottom layer, but this doesn't work properly for multi-line links (live demo):

We could make the link inline-block, but this solution also comes with its own set of problems.

Similar effect: bubble navigation (live demo)

Similar effect: selection-centric navbar(live demo - this is actually my own code replica of a navigation I saw on a supermarket website)

Use case: gradient ghost buttons

Live demo.

[jsnkuhn]

The original webkit blog post for adding -webkit-background-clip: text;: https://webkit.org/blog/164/background-clip-text/

New chrome bug around how background-clip: text; works with position: https://bugs.chromium.org/p/chromium/issues/detail?id=1500148

[gsnedders]

We may well want to exclude Typed OM (#490) and the compute-kind-widget-generated tests, which leaves https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=background-clip%20and%20not%20path%3A%2Fcss%2Fcss-ui%2Fcompute-kind-widget-generated%20and%20not%20path%3A%2Fcss%2Fcss-typed-om

This doesn't feel like we have many failing tests, but clearly there are other bugs mentioned in this thread.

[jsnkuhn]

New webkit bug for interaction between background-blend-mode and background-clip: text;: https://bugs.webkit.org/show_bug.cgi?id=267129

[yisibl]

New webkit bug for interaction between background-blend-mode and background-clip: text;: https://bugs.webkit.org/show_bug.cgi?id=267129

@jsnkuhn For this issue, Firefox(123.0a1 (2024-01-04) ) also has bugs.

[thebabydino]

@jsnkuhn For this issue, Firefox(123.0a1 (2024-01-04) ) also has bugs.

@yisibl that's a completely different bug (nothing to do with blending, the problem is when a layer is clipped to text and another isn't), which I filed back in 2018 and already linked to above.

---

background-clip: text now works cross-browser without any prefixes and in the shorthand. Of course, there are still bugs.

[dandclark]

Thank you for proposing CSS background-clip for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

The proposal was not on a standards track at the time of proposal selection, which made it unsuitable for inclusion in Interop 2024. Note that this should not be taken as a comment on the technology as a whole, or our willingness to take it up in the future. If the feature is standardized, we would welcome this proposal being resubmitted for a future round of Interop.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.