CSS Border Glow Effect: A Copyable Hover and Focus Style

A CSS border glow can make one card or call to action feel active without drawing attention away from the page. The useful version is restrained, appears on hover or keyboard focus, and keeps the text readable. You do not need JavaScript or a heavy animation package for a simple glowing border.

Copy a glowing border in CSS

This example keeps a quiet outline at rest. Hovering a pointer or moving keyboard focus inside the panel strengthens the border and shadow. The link remains a real HTML link with its normal focus behavior.

<div class="glow-panel">
  <h2>See the collection</h2>
  <a href="/websites/">Explore websites</a>
</div>
<style>
.glow-panel {
  padding: 24px;
  color: #f7f4ff;
  background: #151320;
  border: 1px solid #5d5275;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(183,156,255,.08),
              0 0 18px rgba(150,110,230,.12);
  transition: border-color .25s, box-shadow .25s;
}
.glow-panel:hover, .glow-panel:focus-within {
  border-color: #b79cff;
  box-shadow: 0 0 0 1px rgba(183,156,255,.3),
              0 0 26px rgba(150,110,230,.25);
}
@media (prefers-reduced-motion: reduce) {
  .glow-panel { transition: none; }
}
</style>

Adjust the glow colour to your brand but keep it distinct from the panel background. The border provides an edge even when a browser or device renders the shadow softly. Because the glow is decorative, the link label and focus state still need to be understandable without it.

Where a border glow belongs

Use it to emphasize one product option, a featured pricing card or a primary action. Avoid applying the same bright effect to every card: if everything glows, nothing has priority. For a page with video or a moving background, use an even quieter outline so the two layers do not compete.

When to animate the glow

A slow, continuous pulse can be appropriate for a short campaign scene. It is less useful for a form, checkout or reading-heavy page, where repeated movement distracts. If you add a loop, provide a way to pause it where required, honor reduced-motion preferences and check CPU and battery use on a phone. A hover transition is often enough.

Large blurred shadows are expensive when many elements animate at once. Keep the shadow radius modest and animate only one or two panels. Test the initial, hover and keyboard-focus states in both light and dark themes. A CSS border animation that looks clean on a static screenshot can become noisy when placed over moving footage.

Common fixes

• If the glow is clipped, inspect overflow on the parent container and leave room around the card.
• If the edge looks fuzzy, retain a solid or semitransparent border beneath the shadow.
• If keyboard users cannot find the control, give the actual link or button a visible focus indicator; the card glow alone is not enough.
• If scrolling stutters, remove continuous shadow animation before adding more media.

For related motion patterns, see the Scrollhaus effects collection, the cursor effects guide and the website animations guide. CSS references: MDN box-shadow and MDN focus-within.

Explore animated website templates at Scrollhaus →

Need help with a template, account, or project? Email admin@scrollhaus.ai.