DEV Community

We can finally animate CSS gradient

Temani Afif on February 26, 2021

Find out more CSS tricks at css-tip.com Thanks to the new @property defined in the CSS Properties and Values API Level 1 specification we can now ...

Read full post

GrahamTheDev • Feb 26 '21 • Edited

Finally I can launch my "acid trip rave party" website without relying on JavaScript to provide the psychedelic background!

Seriously though I can't wait to be able to use this (the @property methods, not the spinning gradients 😋) but it might be a while before support is good enough 😪

Temani Afif • Feb 26 '21

I would say you will be able to use it within this year. The firefox team won't take too long to bring support to this ;)

Concerning the spinning gradients, it's a technique to hypnotise users to oblige them to give me some likes (it's working ;) )

Robert McGovern • Feb 7 '24

The firefox team won't take too long to bring support to this ;)

Nearly 3 years later and we are still waiting on Firefox sigh

At least we are up to 87% coverage

GrahamTheDev • Feb 26 '21

What is the roadmap for chrome and safari on iOS, I couldn’t find it as it doesn’t seem to work there yet 😔

Temani Afif • Feb 26 '21

Ah forget the iOS people. You can find more details here: ishoudinireadyyet.com/ (it's the Properties & Values API)

Bilelz • Mar 9 '22

thanks! really amazing

Andreas • Feb 27 '21 • Edited

A little typo in your code example above the complex animation section: you define --c but then use --a.

Great article though, thanks!

Temani Afif • Feb 27 '21

Thanks, updated

𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝 • Feb 26 '21

Oh this is exciting!

Bijan • Feb 26 '21

Super excited to see how this gets implemented!

Bruno • Nov 30 '23

Hello, I encountered a weird issue using this type of animation in a nextjs build. In development it works, but in production it doesn't work, as in it goes in huge chunks or it doesnt run at all. Has anyone encountered this kind of issue?