Interactive Glowing Grid Cards

This snippet presents Interactive Glowing Grid Cards. It transforms a static grid of content into an immersive, tactile interface by having a soft, localized glow follow the user’s cursor. This effect illuminates both the background of the hovered card and the borders of adjacent cards, providing continuous, spatial feedback that enhances the premium feel of a dark-mode dashboard or feature list.

Specs

• Weight: ~3 KB (excluding FontAwesome icons). Zero external dependencies for the core logic.
• Performance: Highly optimized. The Javascript only updates CSS variables, offloading the heavy gradient rendering to the browser’s CSS compositor.
• Theming / Customization: Colors are defined via CSS variables (--bg-color, --card-color, and the rgba values in the radial gradients). Easy to adapt to brand colors.
• Responsiveness: Uses CSS Flexbox with flex-wrap and targeted media queries to adjust card widths (calc(50% - 4px) to 100%) and heights for mobile devices.
• Graceful Degradation: If JavaScript is disabled, the cards remain fully visible and usable, they simply lack the dynamic tracking glow.

Anatomy

The structure relies on clever z-indexing and pseudo-elements to separate the content from the lighting effects.

• HTML (The Skeleton): An #cards container holds multiple .card elements. Inside each card is .card-content, which houses the actual text and icons.
• CSS (The Skin): The .card itself acts as a dark backdrop. The magic happens in the ::before and ::after pseudo-elements, which render the glowing radial-gradient. The .card-content sits on top with a solid background, slightly smaller than the parent (using inset: 1px), causing the glow underneath to peek through only at the 1px border.
• JS (The Nervous System): A single onmousemove event listener on the parent #cards container. It loops through all cards, calculates the mouse’s X/Y coordinates relative to each specific card, and injects those values into inline CSS variables (--mouse-x, --mouse-y).

Logic

The core brilliance of this component is the “Masked Border Glow” technique combined with CSS variable tracking.

document.getElementById("cards").onmousemove = e => {
  for(const card of document.getElementsByClassName("card")) {
    const rect = card.getBoundingClientRect(),
          x = e.clientX - rect.left,
          y = e.clientY - rect.top;

    card.style.setProperty("--mouse-x", `${x}px`);
    card.style.setProperty("--mouse-y", `${y}px`);
  };
}

.card::before {
  background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%);
}

Instead of trying to animate physical border elements, the Javascript simply tells the CSS where the mouse is relative to the top-left corner of every card simultaneously. The CSS then draws a soft radial-gradient centered exactly at those coordinates. Because the solid .card-content covers most of the card, the user only sees the gradient where it escapes: as a 1px glowing border (::before) and a soft background highlight (::after on hover). As the mouse moves, the gradient moves, creating the illusion of a flashlight shining across the grid.

Feel

Atmospheric and highly polished. The interaction feels like passing a soft spotlight over a physical, textured surface. Because the Javascript updates every card’s variables simultaneously, hovering near the edge of one card causes the border of the neighboring card to faintly glow as well. This bleed effect connects the disparate elements, making the entire grid feel like a single, unified, reactive organism rather than isolated boxes.