Is it possible to show the color of the background behind a text element when the text-element has a background color set?

Question

I have the following on my site:

body {
  height: 100%;
  width: 100%;
  animation: gradient 11s ease infinite;
  background: linear-gradient(
    to bottom right,
    #bd5a80,
    #bd5a80,
    #7a4d7b,
    #bd5a80
  );
  background-size: 200% 200%;
  background-attachment: fixed;
}

@keyframes gradient {
  0% {
    background-position: 51% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 51% 0%;
  }
}

h1 {
  background-color: white;
  color: transparent;
  padding: 10px 5px;
  border-radius: 0.5rem;
}

<body>
  <h1>This is my text</h1>
</body>

I would like the linear-gradient with animation to show as my text color. But as you can see the h1 has a background-color set to white, which cannot change. Is it possible to clip the text so that the color shows through?

T-S · Accepted Answer · 2022-04-23T22:52:43.577

Closest I could come.

body {
  min-height: 100vh;
  width: 100%;
  background: no-repeat linear-gradient(to bottom right, #bd5a80, #bd5a80, #7a4d7b, #bd5a80);
  background-attachment: fixed;
}

header {
  background-color: white;
  padding: 10px 5px;
  border-radius: 0.5rem;
  box-sizing: border-box;
  width: 80%;
}

header h1 {
  background: no-repeat linear-gradient(to bottom right, #bd5a80, #bd5a80, #7a4d7b, #bd5a80);
  background-size: 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<header>
  <h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </h1>
</header>

Is it possible to show the color of the background behind a text element when the text-element has a background color set?

1 Answers1