Speedy CSS Tip! Animated Gradient Text

Metadata

• Author: Vladislav Klapin
• Full Title: Speedy CSS Tip! Animated Gradient Text
• URL: https://web.dev/speedy-css-tip-animated-gradient-text/

Highlights

@keyframes move-bg { to { background-position: var(—bg-size) 0; } } (View Highlight)review

.boujee-text { —bg-size: 400%; —color-one: hsl(15 90% 55%); —color-two: hsl(40 95% 55%); font-size: clamp(3rem, 25vmin, 8rem); background: linear-gradient( 90deg, var(—color-one), var(—color-two), var(—color-one) ) 0 0 / var(—bg-size) 100%; color: transparent; background-clip: text; -webkit-background-clip: text; animation: move-bg 8s infinite linear; } (View Highlight)