v150 · CSS · Backgrounds
Animated Border Card
A spinning gradient border achieved with a single background-image declaration and background-clip: border-area. Pair it with a @property animation on --angle and the gradient rotates. The same trick also works with the old two-layer padding-box/border-box method — but compare the code.
animation paused
12px
3s
0px
border-area
One background layer clipped to the border strokes via
background-clip: border-area.Chrome 150+
background-clip: border-area
border-box trick
Two-layer background: solid on padding-box, gradient on border-box. Same visual result.
All browsers
padding-box/border-box (old)
border-area (Chrome 150)
.card {
border: 12px solid transparent;
background-image:
linear-gradient(white, white),
conic-gradient(
from var(--angle),
blue, pink, gold
);
background-origin: border-box;
background-clip:
padding-box, border-area;
animation: spin 3s linear infinite;
}
Old trick (any browser)
.card {
border: 12px solid transparent;
background:
linear-gradient(white, white)
padding-box,
conic-gradient(
from var(--angle),
blue, pink, gold
) border-box;
/* border-area not needed
but background shorthand
must list both clips */
animation: spin 3s linear infinite;
}
code
@property --angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
@keyframes spin-gradient {
to { --angle: 360deg; }
}
.card {
border: 12px solid transparent;
/* Content background + animated gradient border in one declaration */
background-image:
linear-gradient(white, white),
conic-gradient(from var(--angle), #3470e4, #c23060, #f59e0b, #1a7a40, #3470e4);
background-origin: border-box;
background-clip: padding-box, border-area; /* ← Chrome 150 */
animation: spin-gradient 3s linear infinite;
}see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗