Animated CSS Gradient Generator
Why gradients need @property to animate
Gradients are images, and CSS does not interpolate between two images — which is why animating a gradient the obvious way does nothing. Registering a custom property with @property gives the browser a typed value it can interpolate, and the gradient redraws on every frame as that value changes.
Syntax
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }| Part | What it controls |
|---|---|
| @property | Registers a custom property with a type. Without registration a custom property is just a string and cannot be animated. |
| syntax | The type, as a string: '<angle>', '<color>', '<length>', '<percentage>' or '<number>'. |
| initial-value | Required for any registered property that is not universal. The animation starts from here if nothing else sets it. |
| inherits | Almost always false for an animation driver, so each element animates its own copy. |
| the animation | Animate the custom property itself in @keyframes — to { --angle: 360deg } — and the gradient that references it redraws each frame. |
| conic-gradient(from var(--angle)) | The from keyword takes the registered angle, which is what produces the rotating sweep. |
Notes from practice
Registration is the whole trick
An unregistered --angle is an unparsed token, so the browser jumps straight from start to end. Typed as '<angle>', it interpolates smoothly.
Spinning borders are a mask, not a border
The usual technique paints the rotating conic across the element and masks out the middle, because border-image cannot animate and ignores border-radius.
Keep the fallback usable
Browsers without @property hold the initial value, so the gradient renders statically at its start angle. Choose an initial-value that looks deliberate on its own.
Animated CSS Gradient Generator FAQ
How do I animate a CSS gradient?
You cannot animate the gradient itself, because gradients are images. Register an angle or colour with @property, animate that custom property in keyframes, and reference it inside the gradient — the gradient then redraws on every frame.
What does @property do in CSS?
It registers a custom property with a type, an initial value and an inheritance rule. Typing it is what lets the browser interpolate the value, which makes custom properties animatable and transitionable.
Why is my custom property animation jumping instead of easing?
Because the property is unregistered. CSS treats it as an opaque string and flips from one value to the other at the halfway point. Add an @property rule declaring syntax: '<angle>' or the appropriate type and it will interpolate.
How do I create a spinning gradient border?
Paint a conic-gradient(from var(--angle), ...) across the element, then mask out the centre so only a ring remains, and animate --angle to 360deg. border-image cannot animate and ignores border-radius, so this is the practical route.
Is @property supported in all browsers?
It is supported in current Chrome, Edge, Firefox and Safari. Older browsers ignore the rule and hold the initial value, so the gradient still renders — it simply does not move. Make that static state look intentional.
Related generators
- Gradients — Linear, radial and conic gradients, repeating patterns and modern colour-space interpolation.
- Keyframe Animation — Pick a ready-made @keyframes set and tune timing, repeat, direction and fill mode.
- Modern Color Functions — oklch(), color-mix(), relative colour syntax and light-dark(), with an sRGB hex fallback where it applies.
- Gradient Text — Fill letters with a gradient using background-clip: text, with an optional shimmer animation.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.