Gradient Text Fill Color On Hover

Gradient text on hover
File Size:0.78 KB
Views Total:454
Last Update:February 13, 2018
Publish Date:January 18, 2018
Official Website:Go to website
License:MIT

how to create a transition gradient  color fill effect in text on hover. So here I am using mix-blend-mode to screen to make the text see through. Then the div behind it will have the gradient color and I set this div to width: 0% to then on hover width: 100% causing it to look like the text has gradient applied to it.

How to use :

1. Add HTML Code :

<div class="outer">
  <div class="bg">
    <div class="inner">

      <h1> GRADIENT TEXT ON HOVER</h1>

    </div>
  </div>
</div>

2. Add CSS for gradient effect :

.outer {
  padding-top: 120px;
  width: 850px;
  margin: auto;
  display: block;
  /* set the font color here as a background color, in this case black
  background-color: black; */
 
}

.bg {
  text-align: center;
  width: 0%;
  transition: all 0.6s ease-out;
  background: #3ebac6 background: -moz-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #3ebac6), color-stop(50%, #8b539e), color-stop(100%, #e53782));
  background: -webkit-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: -o-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: -ms-linear-gradient(left, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  background: linear-gradient(to right, #3ebac6 0%, #8b539e 50%, #e53782 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3ebac6', endColorstr='#e53782', GradientType=1);
}

.inner {
  display: inline-block;
  background-color: white;
  mix-blend-mode: screen;
  padding: 5px;
  width: 850px;
}

.outer:hover .bg {
  width: 100%;
}

Done