Animated Gradient Text

animated-gradient-text.markdown

Animated Gradient Text

A Pen by Shaw on CodePen.

License.

index.html

<h1 class="linear-wipe">Shine!</h1>

scripts

<script src="http://codepen.io/shshaw/pen/epmrgO"></script>

style.less

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;
    }
  }
}