notecss
Animated gradient text is like the poster child of AI right now. Gotta have that animated gradient text sparkle button thingy to be cool.
So here! Steal the recipe.
84 likes
5 reposts
Putting AI in your product? You're gonna need #CSS gradient text animations (if you want to be cool) So here, a recipe! codepen.io/argyleink/pe... ↪ nerdy.dev/animated-gra...Adam Argyle
@argyleink surprise surprise, it doesn’t work on iOS Safari. ????
Really cool effect when it does work though. ????
Amadeus Maximilian
@amxmln Oh poo, I thought they supported @property now
https://caniuse.com/mdn-css_at-rules_property
CSS at-rule: `@property` | Can I use... Support tables for HTML5, CSS3, etcAdam Argyle
@argyleink the gradient is animating, so I think that part is working, it’s the text-clipping that is broken (i.e. I see the animated gradient as a rectangle, but not the text). ????
????Cæsar
@amxmln @argyleink it's the --webkit- prefix on the (now standard) background-clip property
Henry Bley-Vroman
@argyleink what's the motivation for choosing`--webkit-text-fill-color` over `color`
@olets @argyleink yeah removing the prefix seems to do the trick. ????
@amxmln @olets fixed! added it again unprefixed, so older browsers still get the effect
tried @supports, but my initial attempts failed
@olets last i checked no browser supported transparent text, but does a text-fill-color
@amxmln @olets thanks for the help here y'all, this helped me upgrade an old recipe for just gradient text too ❤️
@argyleink at least Chrome, FF, and Safari def support `color: transparent`
@olets correct! yay, love it, thanks, i've updated both my codepens to support the prefixed and unprefixed syntaxes in the recipe <3
Into the notes app you goJoe