We can finally animate CSS gradient

#css #webdev #tutorial

^{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;
}

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 */
}

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 😉

Top comments (19)

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 😪