Spotlight
A soft radial glow follows the cursor around inside the card, illuminating wherever you look.
Spotlight the 10th of 27 designs in the 27 CSS Card Hover Effects collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="card-10"> <div class="card-10__glow"></div> <span class="card-10__tag">Light</span> <h4 class="card-10__title">Spotlight</h4> <p class="card-10__body">Cursor glow follows your mouse inside the card.</p> </div>
.card-10__tag {
font-family: monospace;
font-size: 10px;
padding: 2px 8px;
border-radius: 20px;
background: rgba(124, 108, 255, 0.15);
color: #7c6cff;
border: 1px solid rgba(124, 108, 255, 0.3);
display: inline-block;
margin-bottom: 10px;
}
.card-10__title {
font-size: 17px;
font-weight: 700;
color: #f0eeff;
margin-bottom: 6px;
}
.card-10__body {
font-size: 13px;
color: #b8b6d4;
line-height: 1.6;
}
.card-10 {
width: 100%;
max-width: 280px;
position: relative;
overflow: hidden;
padding: 22px;
border-radius: 14px;
background: #111118;
border: 1px solid rgba(255, 255, 255, 0.07);
cursor: none;
transition: border-color 0.3s;
}
.card-10:hover {
border-color: rgba(124, 108, 255, 0.4);
}
.card-10__glow {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle, rgba(124, 108, 255, 0.25) 0%, transparent 70%);
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
top: 50%;
left: 50%;
}
.card-10:hover .card-10__glow {
opacity: 1;
}
.card-10__tag,
.card-10__title,
.card-10__body {
position: relative;
z-index: 1;
} document.querySelectorAll(".card-10").forEach(function (card) {
var glow = card.querySelector(".card-10__glow");
card.addEventListener("mousemove", function (e) {
var r = card.getBoundingClientRect();
glow.style.left = (e.clientX - r.left) + "px";
glow.style.top = (e.clientY - r.top) + "px";
});
});