text gradient color

css3 gradient

by Oleh Kotsubko

HTML

<p class="text">Deff</p>

CSS

.text {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 40px;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.text:hover {
  animation: text-hover 1.3s ease;
}

.text:hover:before {
    content: 'Deff';
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    color: #ff1f44;
    background: linear-gradient(-90deg,#ff3000,#ed0200,#ff096c,#d50082);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: abra 1.3s ease forwards;
    -o-animation:abra 1.3s ease forwards;
    animation: abra 1.3s ease forwards;
}

@keyframes text-hover {
  0%   { color: #000; }
  100% { color: #191827; }
}

@-webkit-keyframes text-hover {
 0%   { color: #000; }
  100% { color: #191827; }
}

@keyframes abra {
   0% {
        height: 0
    }

    to {
        height: 120%
    }
}

@-webkit-keyframes abra {
  0% {
        height: 0
    }

    to {
        height: 120%
    }
}