Up to 70% off on hosting for WordPress Websites $2.95 /mo

Csshint recommends hosting
css html

Animated Gradient Text Effect

Check Out this animated gradient text effect in pure CSS designed by Shaw.

Animated Gradient Text Effect

Animated Gradient Text Effect


[code language=”html”]
<h1 class="linear-wipe">Csshint.com!</h1>


[code language=”css”]
html { height: 100%; }

body {
background: #333;
text-align: center;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;

h1 { font-size: 20vw; }

.linear-wipe {
text-align: center;

background: linear-gradient(to right, #FFF 20%, #FF0 40%, #FF0 60%, #FFF 80%);
background-size: 200% auto;

color: #000;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

animation: shine 1s linear infinite;
@keyframes shine {
to {
background-position: 200% center;

css gradient animation