{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreienuc7p5jh6yr75gbjjuntnycwgb6qdjrtxln3cqwcnzt52m3odl4",
    "uri": "at://did:plc:aoqs4f5ru6ztomatyvept7bf/app.bsky.feed.post/3mnlsxqry3f25"
  },
  "canonicalUrl": "https://til.iainsimmons.com/posts/adding-an-animated-card-border-glow-with-css",
  "description": "today iain learned: How to add an animated card border glow with CSS",
  "path": "/posts/adding-an-animated-card-border-glow-with-css",
  "publishedAt": "2026-04-21T00:00:00.000Z",
  "site": "at://did:plc:aoqs4f5ru6ztomatyvept7bf/site.standard.publication/3mnlsntqzp72a",
  "tags": [
    "CSS",
    "webdev"
  ],
  "textContent": "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:\n\n![[attachments/border-glow-reference-screenshot.png|Reference screenshot for the border glow effect]]\n\nI 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.\n\nMy initial implementation used a ::before pseudo-element and had a simple opacity transition on :hover/:focus-within:\n\nThat was fine, but I wanted a couple of other features:\n1. 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)\n2. 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)\n\nI 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.\n\nSo 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. \n\n> [!INFO]\n>  @property was Baseline 2024 Newly Available at the time of writing this article. Check the @property MDN docs for the latest information.\n\nHere's the code for registering the CSS custom property that I named --border-glow-width:\n\nThat 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):\n\nAnd then animated like anything else:\n\nNote the forwards animation fill mode. This ensures the animation stops at its end state (with the glow at 50% width) when it finishes.\n\nAnd here's the final CSS, all together:\n\nHopefully you noticed it in action when clicking around this site. 🙂",
  "title": "Adding an animated card border glow with CSS"
}