Animation · Attention · 20

Glow Border

Glow Border = an animated conic-gradient ring that rotates around an element to signal a live, active, or premium state.

Skip to the modify prompt →

Live

Respects prefers-reduced-motion: the animation is disabled and the final state is shown.

How to prompt it

Add a glow border: a rotating conic-gradient ::before behind the content, transform: rotate only.

Tighten the gradient to a 1px edge and slow the spin to 8s for a subtle premium frame.

Drive the glow from a 'live' state (not an infinite loop), expose --glow-color and --glow-speed, and under prefers-reduced-motion freeze the ring as a static 1px accent border. Keep the rotating layer clipped to the rounded corner.

Modify prompts change only the target — the rest of your page stays untouched.

What is a Glow Border?

A glow border wraps an element in a ring of light that slowly rotates — a conic gradient spun behind the content. It reads as 'live', 'premium', or 'on'. Because the motion is a transform on a pseudo-element, it stays on the compositor. Use it sparingly: a border that always moves everywhere is just noise.

Animation Specimen

Trigger: mount
Tech: css
Duration: 4s
Easing: linear
Performance: transform

When to use

Live / recording / 'on' indicators
Premium or featured card frames

Avoid when

On every card — it stops meaning anything
Around dense text where the motion distracts

The motion lives on a pseudo-element, so the box stays still and the effect stays cheap.

Get the code

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.glow {
  position: relative;
  padding: 16px 22px;
  border-radius: 14px;
  background: var(--surface, #fff);
  color: var(--ink, #1a1c22);
  font: 600 14px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  isolation: isolate;
}
.glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--anim-accent), transparent 35%, var(--anim-accent));
  z-index: -1;
  animation-name: spin;
  animation-duration: var(--anim-duration, 4s);
  animation-timing-function: var(--anim-easing, linear);
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

<div class="glow anim-el">Live</div>

Copy and drop it into your project. The motion touches only transform / opacity; colour comes from --anim-accent.

Glow Border

What is a Glow Border?

Animation Specimen

When to use

Avoid when

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns