<h1 class="header">Pure CSS Gradient Text Animation Effect</h1>

<!-- Originally seen on https://daneden.github.io/animate.css/ -->
html {
	background: #1d1f20;
	margin:  0 4rem;
}
.header {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 6rem;
	font-weight:  100;
	letter-spacing: 2px;
	text-align: center;
	color: #f35626;
	background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 10s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.