DEV Community

Cover image for We can finally animate CSS gradient
Temani Afif
Temani Afif

Posted on • Updated on

We can finally animate CSS gradient

Hold on Firefox users the below is only supported on Chrome and Edge for now.

Thanks to the new @property defined in the CSS Properties and Values API Level 1 specification we can now have transition with custom properties (aka CSS variables).

@property --my-var {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}
Enter fullscreen mode Exit fullscreen mode

All the trick is within the syntax part that allows us to explicitly define the type of the property thus the browser will know how to do the interpolation between values (the transition we want to have)

Specifies the syntax of the custom property registration represented by the @property rule, controlling how the property’s value is parsed at computed value time.

Considering this we simply need to use the variables inside the gradient definition and animate them.

Animate the colors

We use <color> for the syntax

Animate the color size

We can use <percentage>, <length> or <angle> based on each use case

Animate the direction

We use <angle>

Animate the position

We use <percentage> or <length>


As you can see, it's easy and the code looks like the following in all the cases:

/* we define the variable */
@property --a{
  syntax: '<percentage>'; /* its type */
  inherits: false;
  initial-value: 10%; /* the initial value */
}
/**/
.box {
  transition:--a 0.5s; /* we add transition to it */
  background:linear-gradient(red var(--a),blue); /* we use it inside the gradient */
}
.box:hover {
  --a:50%; /* we update on hover */
}
Enter fullscreen mode Exit fullscreen mode

We can have complex animation:

and use keyframes

Let's wait for this to be supported on Firefox and we can do a lot of magic with πŸ˜‰

Discussion (16)

Collapse
inhuofficial profile image
InHuOfficial • Edited on

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 πŸ˜ͺ

Collapse
afif profile image
Temani Afif Author

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 ;) )

Collapse
inhuofficial profile image
InHuOfficial

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

Thread Thread
afif profile image
Temani Afif Author

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

Collapse
bilelz profile image
Bilelz

thanks! really amazing

Collapse
devmount profile image
Andreas • Edited on

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

Great article though, thanks!

Collapse
afif profile image
Temani Afif Author

Thanks, updated

Collapse
bijan profile image
Bijan

Super excited to see how this gets implemented!

Collapse
nataliedeweerd profile image
𝐍𝐚𝐭𝐚π₯𝐒𝐞 𝐝𝐞 π–πžπžπ«π

Oh this is exciting!

Collapse
carolmckay profile image
CarolMcKay

Whoa! Wonderful! I have seen @property but thankyou for explaining it so well.

Collapse
eboye profile image
eboye

Cool, but I'll wait Firefox support to start tickling around :D

Collapse
rahxuls profile image
Rahul

This is an amazing article. You should have submitted to CSS-Tricks.com

Collapse
msyyn profile image
Mika

This looks good! Thanks for sharing

Collapse
afif profile image
Temani Afif Author

welcome :) say tuned, more fancy tricks are coming ;)

Collapse
julesparra profile image
Jules Parra

thanks for the breakdown!! using keyframes really brings it together - excited to make magic✨

Collapse
eioluseyi profile image
Emmanuel Imolorhe

I knew there had to be a pure css solution to this, not requiring Js.
Thanks for sharing!