How a Text Gradient is Made

              
                /* FINAL CODE PIECE THAT YOU CAN COPY, EDIT and USE
.textGradient{
  background-image: linear-gradient(left, #07af19 0%, #07af19 0.71, #ffbb1d 29.69, #f7413d 58.94, #4d79e3 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
*/

@import url(https://fonts.googleapis.com/css?family=Andika);
$stepTiming: 0.8s 0.2s;

.textGradient-demo {
  width: 100px;
  height: 100px;
  line-height:100px;
  font-size:2em;
  margin: 0 auto;
  transition: $stepTiming;
  .step-1 & {
    border:1px solid #fd0b58;
  }
  .step-2 & {
    border:none;
    background-image: -webkit-linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%);
    background-image: -moz-linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%);
    background-image: -o-linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%);
    background-image: -ms-linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%);
    background-image: linear-gradient(left, #07af19 0%, #07af19 0.71%, #ffbb1d 29.69%, #f7413d 58.94%, #4d79e3 100%);
  }
  .step-3 & {
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
  }
  .step-4 & {
    -webkit-text-fill-color: transparent;
  }
}
.textGradient-title {
  width: 300px;
  padding: 1rem;
  color: white;
  background: #D94948;
  border-radius: 20px;
  margin: auto;
  opacity: 0;
  transition: $stepTiming;
  .step-6 & {
    opacity: 1;
  }
}
body {
  background: #333;
  font-family: 'Andika', sans-serif;
  color: white;
  text-align: center;
  font-size: large;
  transform: translateZ(0);
}
.steps {
  position: relative;
  height: 45px;
  > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    background: #333;
    transition: 0.3s;
  }
  .step-0 {
    opacity: 1; 
  }
  .step-1 & .step-1 {
    opacity: 1; 
  }
  .step-2 & .step-2 {
    opacity: 1; 
  }
  .step-3 & .step-3 {
    opacity: 1; 
  }
  .step-4 & .step-4 {
    opacity: 1; 
  }
  .step-5 & .step-5 {
    opacity: 1; 
  }
  .step-6 & .step-6 {
    opacity: 1; 
  }
}
h1 {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.5rem;
  border-bottom: 1px solid #555;
  color: #999;
}
              
            

!