Effect Headline

<h1>Some Text</h1>

<div class="split-text-container">
	<h1 data-text="Split Colors">Split Colors</h1>
</div>

Gradient Text

// Gradient Text
h1 {
	background: linear-gradient(30deg, #9ED8DB 40%, #007B82 70%);
	background-clip: text;
	color: transparent;
}

// Animated Gradient Text
h1 {
	background: radial-gradient(circle, #80ffc1 0%, #ff6161 100%);
  background-clip: text;
  color: transparent;
  animation: animatedGradient 2s infinite ease;
  animation-direction: alternate;
}

@keyframes animatedGradient {
  from {
    background-size: 100%;
  }

  to {
    background-size: 250%;
  }
}

// Image Background Text
h1 {
	background: url('./image.jpg') no-repeat center center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

// Split Color Text
.split-text-container {
  position: relative;
}

h1 {
  color: #fff;
}

h1::before {
  content: attr(data-text);
	clip-path: polygon(0px 105%, 93% 0%, 100% 100%);
	margin: 0;
	color: #ff6161;
	position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none; /* Make text selectable */
}