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}1314@keyframes rainbowHover {15 0% {16 background-size: 100%;17 }18 80% {19 background-size: 650%;20 }21 100% {22 background-size: 650%;23 }24}2526/* select element you want to animate */27span {28 font-size: 40px;2930 /* 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;3940 /* animate element when page loads */41 animation: rainbowLoad 0.75s ease forwards;42}4344/* animate element on hover */45span:hover {46 cursor: pointer;47 animation: rainbowHover 0.5s ease-in forwards;48}