<h1>Gradient text</h1>
body {
text-align: center;
}
h1 {
display: inline-block;
font: bold 4.5em/1.5 Bebas, sans-serif;
color: #5CA17C; /*non-webkit fallback*/
font-size: 72px;
text-transform: uppercase;
background-image: linear-gradient(to bottom, #26BDA6, #FF9F65, #DED37E, #26BDA6);
background-size: auto 250%;
transition: background-position 0.5s;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 200px;
background-position: 0 100%;
}
h1:hover {
background-position: 0 0;
cursor: pointer;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.