<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="match" href="reference/css-background-clip-text-ref.html" />
<title>Document</title>
<style>
html {
scrollbar-width: none;
}
p, .container {
border: 0.8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.4em;
font: 900 1.2em sans-serif;
text-decoration: underline;
}
.linear-gradient {
background: linear-gradient(60deg, red, yellow, red, yellow, red);
}
.radial-gradient {
background: radial-gradient(circle, red, yellow, red, yellow, red);
}
.conic-gradient {
background: conic-gradient(red, yellow, red, yellow, red);
}
.image-background {
background: url('./assets/car.png');
}
.border-box {
background-clip: border-box;
}
.padding-box {
background-clip: padding-box;
}
.content-box {
background-clip: content-box;
}
.text {
background-clip: text;
color: rgb(0 0 0 / 20%);
}
.new-background {
background: rgb(255 255 0 / 30%);
}
</style>
</head>
<body>
<!-- Hack to make the test runner wait for the image to load -->
<img src="./assets/car.png" />
<p class="border-box linear-gradient">The background extends behind the border.</p>
<p class="padding-box radial-gradient">
The background extends to the inside edge of the border.
</p>
<p class="content-box conic-gradient">
The background extends only to the edge of the content box.
</p>
<div class="text container linear-gradient">
The background is clipped to the foreground text.
<span>Some other text in a sub-element</span>
</div>
<div class="text container radial-gradient">
The background is clipped to the foreground text.
<span>Some other text in a sub-element</span>
</div>
<div class="text container conic-gradient">
The background is clipped to the foreground text.
<span>Some other text in a sub-element</span>
</div>
<div class="text container image-background">
Testing text.
<div>
<div class="new-background" style="color: rgb(0 0 0 / 20%);">The is nested text that should still be clipped to the background</div>
</div>
</div>
</body>
</html>
