Recent searches
Search options
Putting AI in your product? You're gonna need #CSS gradient text animations (if you want to be cool)
So here, a recipe!
https://codepen.io/argyleink/pen/vEBmZNw
@argyleink what's the motivation for choosing`--webkit-text-fill-color` over `color`
@olets last i checked no browser supported transparent text, but does a text-fill-color
@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
Thanks ! Immediatly applied on my website !
https://villapirorum.netlify.app/antoine
Already had the gradient and the animation on gradient card borders. Animation on my titles was just what was needed ! 
However I had to initialize the two color properties out of the @property, as initial-value did not seem to accept variables.
Cannot test on Safari, but I hpe it's ok as I already had the prefixed fallabcks on my gradient effect...
Also did not forget to take reduce-motion into account #a11y !
Or is it overkill for such a linear gradient animation ?
If not maybe you could add a "prefers-reduced-motion: no-preference" media query around such demos (even if you already handle it globaly elsewhere) ? Might help spread the word, as many are following you and learning from your code.
Happy christmas holidays !