<div class="wrapper">
  <h1 class="title gradient">Animated gradient</h1>
  <div class="visible-section">

  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;700&display=swap");

html,
body {
  height: 100%;
}

body {
  background: #242424;
  font-family: Rubik, sans-serif;
  color: #eee;
  display: flex;
  overflow: hidden;
}

.wrapper {
  position: relative;
  margin: auto;
  text-align: center;
}

@keyframes shimmer {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

@keyframes shimmer-movement {
  from {
    translate: 0;
  }
  to {
    translate: -50%;
  }
}

.title {
  position: relative;
  font-size: clamp(20px, 6vw, 80px);
  margin: 0;
}

.title::after {
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: 200%;
  background: linear-gradient(to right, blue, red);
  background-attachment: fixed;
  opacity: 0.3;

  animation: shimmer-movement 4s linear infinite alternate;
}

.title::before {
  content: "Full background";
  position: absolute;
  top: 0;
  color: #fff;
  font-weight: 300;
  font-size: clamp(10px, 3vw, 14px);
  translate: -110%;
  z-index: 2;
}

.visible-section {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 120%;
  translate: 0 -10%;
  border: 1px dashed lime;
}

.visible-section::after {
  content: "Visible part of the background";
  display: block;
  font-size: clamp(10px, 3vw, 14px);
  text-align: center;
  translate: 0 -20px;
  color: lime;
}

.gradient {
  background: linear-gradient(to right, blue, red);
  background-size: 200%;
  background-position: 0% 0;
  background-attachment: fixed;
  -webkit-background-clip: text;
  color: transparent;
  background-clip: text;
  width: fit-content;

  animation: shimmer 4s linear infinite alternate;
}