Examples

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip -->

<div class="text"><div class="inner"><p>

The background is clipped to the foreground text.</p></div></div>

CSS

.text {
  border: .8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
   background-clip: text;
  -webkit-background-clip: text;
}

.inner {
 width: 200px;
 height: 200px;
 background-color:rgba(1,0,0,0.2);
}

p {
    color: transparent;
}

.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }