Adding an animated card border glow with CSS

I recently saw a nice top border glow effect from a site shared on the Astro blog post from March 2026, coincidentally made by David V Kimball, author of the Astro Modular template used to build this site. The site is no longer up (it was built for a challenge), but I nabbed a screenshot and used that as a reference:

![[attachments/border-glow-reference-screenshot.png|Reference screenshot for the border glow effect]]

I think I've seen this effect before, maybe in a Kevin Powell or Wes Bos YouTube video, and I straight away thought of using a radial gradient.

My initial implementation used a ::before pseudo-element and had a simple opacity transition on :hover/:focus-within:

That was fine, but I wanted a couple of other features:

1. An animation, rather than a transition, for the glow to expand out from the centre to its full width (50% width of the container element)
2. A persistent border glow on the post article container element, so that it wouldn't change opacity during the view transitions from clicking a post card on the homepage to the article view (and would not animate as above)

I probably could have declared a new radial gradient for different keyframes, but that seems repetitive, and I'm not even sure how well it would work to animate/interpolate between them.

So instead, I opted to only change the "width" of the radial gradient, which meant using a CSS custom property/variable, and registering it. This allows you to control the inheritance, type (syntax) and initial value.

[!INFO] @property was Baseline 2024 Newly Available at the time of writing this article. Check the @property MDN docs for the latest information.

Here's the code for registering the CSS custom property that I named --border-glow-width:

That can be used as normal, both with its initial value (here instead of the previously hard-coded 50% value for the radial gradient), or setting a new value (overriding the initial 0% back to 50% for the "permanent" glow):

And then animated like anything else:

Note the forwards animation fill mode. This ensures the animation stops at its end state (with the glow at 50% width) when it finishes.

And here's the final CSS, all together:

Hopefully you noticed it in action when clicking around this site. 🙂