The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<article class="glow-card">
  <h3>Animated border</h3>
  <p>A conic gradient spins behind the card and shows through a thin gap.</p>
</article>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create a card with an animated rotating gradient border and glow, using only HTML and CSS.

Requirements:
- Register a custom property with @property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; } so it can be animated.
- Card: width min(86vw, 360px), 36px padding, 20px radius, dark background #0f1530, white text, position: relative, on a #0b1020 page.
- ::before and ::after pseudo-elements with inset: -2px, z-index: -1, border-radius 22px, and background: conic-gradient(from var(--angle), #2506ad, #ff7b00, #06b6d4, #2506ad).
- Animate --angle from 0deg to 360deg over 4s, linear, infinite, on both pseudo-elements.
- The ::after copy is blurred (24px) at 70% opacity to create an outer glow.
- Disable the animation under prefers-reduced-motion.
- Content: heading "Animated border" and one sentence.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Register --angle with @property. Plain custom properties are treated as strings and cannot be interpolated; a registered angle can.

2. 2

   Place a pseudo-element behind the card, slightly larger than it (inset: -2px), and fill it with a conic-gradient that starts at var(--angle).

3. 3

   The card's solid background covers the middle, leaving only a 2px ring of gradient visible: the border.

4. 4

   Animate --angle from 0 to 360 degrees. The gradient appears to rotate while the element itself stays still.

5. 5

   Duplicate the pseudo-element and blur it to produce a soft glow of the same colours.

Customisation tips

• Increase inset to -3px for a thicker border.
• Run the animation only on hover by setting animation-play-state: paused and changing it to running on :hover.
• @property is supported in all current major browsers; older ones show a static gradient border, which is a fine fallback.

More components