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

This: " background-clip: text;" So you can see the gradient is "clipped" on the text. — casencio, May 15 '22 at 21:36
Please put up a runnable snippet so we can see exactly how you are creating those linear-gradients. See https://stackoverflow.com/help/minimal-reproducible-example for help with doing this. And is it the same linear-gradient that you want but 'stretched' over the whole page? — A Haworth, May 16 '22 at 08:24
Hi! @AHaworth I added a snippet! Hope it helps to understand. As you can see I put 0deg (vertical) gradient so its more easy to see what I said. Looks awful like that. Every word or highlight repeating the small gradient. What I want is a big gradient, all site long, so all the text with that "gradient" class get clipped with the color that correspond in that position. — casencio, May 16 '22 at 22:38
@AHaworth you can see I attached a picture "example" that is the same but with horizontal gradients. There you can see every headline repeating green-pink, green-pink, green-pink... What I want is the ones on the left green, the ones on the middle, midde gradient and the ones on the right pink. I know how to do this manually... but I was looking a solution for all the class "gradient" on my site. And to do the same right-left and top-bottom... — casencio, May 16 '22 at 22:45
You could add `background-attachment: fixed;`, so that the reference point for the background becomes the viewport. — CBroe, May 17 '22 at 08:32
Thanks a lot!! Its not exactly what I want, because I wanted static and not like moving... but its a really good solution!!! :) — casencio, May 17 '22 at 19:36
Hi @ksav! Yes... have tested a lot of things and dont work... the "fixed" gradient makes weird things in chrome, sometimes disappear... :( — casencio, Jul 14 '22 at 07:34

score 0 · Answer 1 · answered May 17 '22 at 08:34

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>

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

1 Answers1