Its possible to make a text gradient clip that is all page size? Not repeating on every element

Question

.gradient {
  background-color: #00ccaa;
  background: linear-gradient(0deg, #00ccaa, #f530a9);
  background-size: cover;
  background-clip: text;
  box-decoration-break:slice;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break:clone;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

.content{
  width:90%;
  max-width: 800px;
  margin-right:auto;
  margin-left:auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  }

<h1 class="gradient">HEADING EXAMPLE:</h1>
<h3>Thats a subtitle </h3>

<div class="content">
<p>What is Lorem Ipsum? <span class="gradient">Lorem Ipsum is simply dummy </span>text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <span class="gradient">It was popularised in the 1960s </span>with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>

<div class="content">
<p>What is Lorem Ipsum? <span class="gradient">Lorem Ipsum is simply dummy </span>text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <span class="gradient">It was</span> ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen <span class="gradient">popularised in the 1960s </span>with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>

I got a page with a gradient texts. Here is the example

My question is, can the gradient be all page long, and then clip it on the text?

So I get a nice gradient all across the page and not that repeating gradients through all the headings.

Tried something like that but didn't work:

  background-size: 100vmax;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  background-clip: text;
  box-decoration-break:slice;

Found something similar to what I want on CodePen: https://codepen.io/cmalven/pen/PoEJvjE

Answer 1

Try adding background-attachment: fixed; to your gradient class.

.gradient {
  background-color: #00ccaa;
  background: linear-gradient(0deg, #00ccaa, #f530a9);
  background-size: cover;
  background-clip: text;
  box-decoration-break: slice;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  background-attachment: fixed;
}

.content {
  width: 90%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

<h1 class="gradient">HEADING EXAMPLE:</h1>
<h3>Thats a subtitle </h3>

<div class="content">
  <p>What is Lorem Ipsum? <span class="gradient">Lorem Ipsum is simply dummy </span>text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
    and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <span class="gradient">It was popularised in the 1960s </span>with the release
    of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div class="content">
  <p>What is Lorem Ipsum? <span class="gradient">Lorem Ipsum is simply dummy </span>text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
    and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <span class="gradient">It was</span> ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen <span class="gradient">popularised in the 1960s </span>with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
    PageMaker including versions of Lorem Ipsum.</p>
</div>