Enea Xharja

Animated Gradient

Animate your gradient color with CSS:

<p>Text <span>gradient</span> is amazing!</p>
/* create animation */
@keyframes rainbowLoad {
  0% {
    background-size: 650%;
  }
  40% {
    background-size: 650%;
  }
  100% {
    background-size: 100%;
  }
}

@keyframes rainbowHover {
  0% {
    background-size: 100%;
  }
  80% {
    background-size: 650%;
  }
  100% {
    background-size: 650%;
  }
}

/* select element you want to animate */
span {
  font-size: 40px;

  /* gradient effect */
  background-color: #3ddc84;
  background: linear-gradient(45deg, #3ddc84, #4285f4);
  background-size: 100%;
  background-repeat: repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;

  /* animate element when page loads */
  animation: rainbowLoad 0.75s ease forwards;
}

/* animate element on hover */
span:hover {
  cursor: pointer;
  animation: rainbowHover 0.5s ease-in forwards;
}

Updated on February 07, 2021

Tagged with: css, snippets


Profile picture

Hey there! I'm Enea, a web developer currently working at eqolot. Welcome to my little corner of the web, where I share my personal collection of notes, code snippets, and resources on topics that interest me.

© 2021 Enea Xharja