Enea Xharja Logo

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}
© 2021 Enea Xharja