How does the border chase around the card?

A conic-gradient sweeps its colors around a full circle instead of along a line, and it's placed on a ::before pseudo-element slightly larger than the card, behind it (z-index: -1). Its starting angle is a custom property, --glow-angle, registered with @property and animated from 0deg to 360deg — cycling the gradient's rotation reads as a moving ring of light chasing around the edge.

Why animate a custom property instead of using transform: rotate()?

Rotating the whole pseudo-element with transform: rotate() looks fine for a square avatar, but a wide card's rectangular bounding box swings its corners far outside the visible ring as it turns — around 45-90° the glow balloons out on two sides and nearly disappears on the other two, an obvious distortion. Animating the conic-gradient's own from angle via @property keeps the rectangle perfectly still and only cycles the colors, so the glow stays evenly sized on every side regardless of the card's aspect ratio.

How is the glow itself created?

A CSS filter: blur() on the gradient layer softens its edges into a diffuse halo. Increasing the blur value spreads the glow further outside the card's outline; increasing thickness controls how much of that gradient ring is actually visible as a solid border versus soft glow.

Why does the card need position: relative and isolation: isolate?

The glowing pseudo-element is position: absolute and needs a positioned ancestor to anchor to, which the card's own padding-box provides. isolation: isolate creates a new stacking context so z-index: -1 on the glow layer stays behind the card's own background instead of leaking behind unrelated page content.

Will the spinning animation hurt performance, and does @property work everywhere?

Animating a background through a custom property triggers repaint rather than a cheap compositor-only pass, but on one small blurred element that's negligible — avoid animating dozens of these on the same page. @property has full support in current Chrome, Edge, and Safari, and Firefox added it in version 128; in a browser without support, the conic-gradient still renders correctly, it just won't animate smoothly.

Does this tool store or upload my settings?

No — every color, speed, and blur value is rendered entirely in your browser. Nothing is sent to a server.

CSS ANIMATED GLOWING BORDER GENERATOR

Build a rotating conic-gradient border that chases around a card, then copy the CSS.

Glowing border

Glow colors

Speed: 3.0s

Thickness: 3px

Glow blur: 6px

Radius: 18px

Inner background

@property --glow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.glow-card {
  position: relative;
  border-radius: 18px;
  padding: 3px;
  isolation: isolate;
}

.glow-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--glow-angle), #ff6a35, #ffe17d, #4ac8ff, #ff6a35);
  filter: blur(6px);
  animation: glow-spin 3s linear infinite;
}

.glow-card__inner {
  background: #201d19;
  border-radius: 15px;
  padding: 28px 36px;
}

@keyframes glow-spin {
  to { --glow-angle: 360deg; }
}

How to build an animated glowing border

1
Pick 3-5 colors for the rotating glow gradient.
2
Adjust rotation speed, border thickness, glow blur, and corner radius on the live preview.
3
Pick an inner background color to match your card.
4
Copy the generated CSS and HTML and apply it to your card element.

Questions

How does the border chase around the card?: A conic-gradient sweeps its colors around a full circle instead of along a line, and it's placed on a ::before pseudo-element slightly larger than the card, behind it (z-index: -1). Its starting angle is a custom property, --glow-angle, registered with @property and animated from 0deg to 360deg — cycling the gradient's rotation reads as a moving ring of light chasing around the edge.
Why animate a custom property instead of using transform: rotate()?: Rotating the whole pseudo-element with transform: rotate() looks fine for a square avatar, but a wide card's rectangular bounding box swings its corners far outside the visible ring as it turns — around 45-90° the glow balloons out on two sides and nearly disappears on the other two, an obvious distortion. Animating the conic-gradient's own from angle via @property keeps the rectangle perfectly still and only cycles the colors, so the glow stays evenly sized on every side regardless of the card's aspect ratio.
How is the glow itself created?: A CSS filter: blur() on the gradient layer softens its edges into a diffuse halo. Increasing the blur value spreads the glow further outside the card's outline; increasing thickness controls how much of that gradient ring is actually visible as a solid border versus soft glow.
Why does the card need position: relative and isolation: isolate?: The glowing pseudo-element is position: absolute and needs a positioned ancestor to anchor to, which the card's own padding-box provides. isolation: isolate creates a new stacking context so z-index: -1 on the glow layer stays behind the card's own background instead of leaking behind unrelated page content.
Will the spinning animation hurt performance, and does @property work everywhere?: Animating a background through a custom property triggers repaint rather than a cheap compositor-only pass, but on one small blurred element that's negligible — avoid animating dozens of these on the same page. @property has full support in current Chrome, Edge, and Safari, and Firefox added it in version 128; in a browser without support, the conic-gradient still renders correctly, it just won't animate smoothly.
Does this tool store or upload my settings?: No — every color, speed, and blur value is rendered entirely in your browser. Nothing is sent to a server.