Border Glow
No library Intermediate
A conic gradient spins continuously around the card edge, creating an iridescent glowing border. Uses @property for smooth angle interpolation.
A conic gradient spins continuously around the card edge, creating an iridescent glowing border. Uses @property for smooth angle interpolation.
Goal: Create a "Border Glow" card animation.
Visual behavior: The card has a continuously spinning conic gradient border that gives it a glowing, iridescent edge. The card interior remains dark, making the animated border pop. This works as an always-on ambient effect or can be triggered on hover.
Technique:
- Use a CSS custom property @property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
- Wrap card content in a 1px padding container whose background is a conic-gradient(from var(--border-angle), ...)
- The inner element has a solid dark background and border-radius: (outer - 1)px to create the inset effect
- Animate: @keyframes spin { to { --border-angle: 360deg; } } applied with animation: spin 3s linear infinite
- Gradient colors: e.g., #6366f1 → #0ea5e9 → #8b5cf6 → back to start
Accessibility: Pause or stop the spinning animation under prefers-reduced-motion. The card shape and content remain fully visible.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.