Animated Gradient

html

1<p>Text <span>gradient</span> is amazing!</p>

css

1/* create animation */
2@keyframes rainbowLoad {
3  0% {
4    background-size: 650%;
5  }
6  40% {
7    background-size: 650%;
8  }
9  100% {
10    background-size: 100%;
11  }
12}
13
14@keyframes rainbowHover {
15  0% {
16    background-size: 100%;
17  }
18  80% {
19    background-size: 650%;
20  }
21  100% {
22    background-size: 650%;
23  }
24}
25
26/* select element you want to animate */
27span {
28  font-size: 40px;
29
30  /* gradient effect */
31  background-color: #3ddc84;
32  background: linear-gradient(45deg, #3ddc84, #4285f4);
33  background-size: 100%;
34  background-repeat: repeat;
35  background-clip: text;
36  -webkit-background-clip: text;
37  -webkit-text-fill-color: transparent;
38  -webkit-box-decoration-break: clone;
39
40  /* animate element when page loads */
41  animation: rainbowLoad 0.75s ease forwards;
42}
43
44/* animate element on hover */
45span:hover {
46  cursor: pointer;
47  animation: rainbowHover 0.5s ease-in forwards;
48}