Question 1

How do I animate a CSS gradient?

Accepted Answer

The most reliable way is to animate the background-position of an oversized gradient. Set background-size to 200% 200% (or larger), place the gradient, and animate background-position from 0% 0% to 100% 100%. This works in all modern browsers and renders smoothly with GPU acceleration.

Question 2

Can I animate the gradient colors themselves?

Accepted Answer

Directly animating between gradients is not supported in CSS (background-image is not interpolatable). However, you can stack multiple gradients with the same animation and use opacity/transform to cross-fade, or use CSS Houdini @property for color interpolation in supported browsers.

Question 3

What is the best easing for a smooth gradient animation?

Accepted Answer

For continuous looping gradient animations, 'linear' easing looks most natural because the loop is seamless. For one-shot animations (like a hover effect), 'ease-in-out' or a custom cubic-bezier like (0.4, 0, 0.2, 1) gives a polished feel.

Question 4

Are animated gradients GPU-accelerated?

Accepted Answer

Background-position animations are generally smooth but don't always trigger GPU acceleration. For best performance on lower-end devices, animate 'transform' on a pseudo-element with the gradient set as a static background — this is fully GPU-accelerated and very smooth at 60fps.

Type

Color Stops

Angle & Size

Animation

Presets