Skip to content

Instantly share code, notes, and snippets.

@frikishaan
Last active January 31, 2024 06:07
Show Gist options
  • Save frikishaan/c9d525ef675bbd52fb4d206207bcfa25 to your computer and use it in GitHub Desktop.
Save frikishaan/c9d525ef675bbd52fb4d206207bcfa25 to your computer and use it in GitHub Desktop.
CSS Text background animation
/*
* Create an element with class 'hero-text'
*
*/
.hero-text {
background: radial-gradient(circle, #0284c7, #ca8a04);
background-clip: text;
color: transparent;
background-size: 200% 200%;
animation: hero-text 15s linear infinite;
}
@keyframes hero-text {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment