clip-text-blend-mode.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-backgrounds/background-clip/clip-text-blend-mode.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>A 'background-clip: text' background layer should blend with the underlying layer</title>

<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text">

<link rel="match" href="clip-text-blend-mode-ref.html">

<style>

#target {

  font-size: 100px;

  background-image: linear-gradient(#f00, #f00), linear-gradient(#ff0, #ff0);

  background-color: red;

  background-blend-mode: difference, normal;

  background-clip: text;

  color: transparent;

</style>

<div id="target">X</div>