20 CSS Cards with Animations 06 / 20
Cursor Spotlight Card
A soft radial glow follows the cursor position inside the card, illuminating where you look.
The code
<div class="stage-6">
<div class="card-spotlight" id="spotCard">
<div class="spotlight-glow" id="spotGlow"></div>
<div class="spot-content">
<div class="spot-avatar">V</div>
<h4>Spotlight Card</h4>
<p>Cursor light follows your mouse around the card surface.</p>
</div>
</div>
</div> <div class="stage-6">
<div class="card-spotlight" id="spotCard">
<div class="spotlight-glow" id="spotGlow"></div>
<div class="spot-content">
<div class="spot-avatar">V</div>
<h4>Spotlight Card</h4>
<p>Cursor light follows your mouse around the card surface.</p>
</div>
</div>
</div>.card-spotlight {
width: 200px;
padding: 20px;
border-radius: 14px;
background: #111118;
border: 1px solid var(--ccg-border);
position: relative;
overflow: hidden;
cursor: none;
}
.spotlight-glow {
position: absolute;
width: 140px;
height: 140px;
border-radius: 50%;
background: radial-gradient(circle, rgba(124, 108, 255, 0.22) 0%, transparent 70%);
pointer-events: none;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
transition: opacity 0.3s;
opacity: 0;
}
.card-spotlight:hover .spotlight-glow {
opacity: 1;
}
.card-spotlight:hover {
border-color: rgba(124, 108, 255, 0.4);
}
.spot-content {
position: relative;
z-index: 1;
}
.card-spotlight h4 {
font-size: 13px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.card-spotlight p {
font-size: 11px;
color: var(--ccg-muted);
line-height: 1.5;
}
.spot-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: #fff;
}
/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
width: 100%;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 2.5rem 1.5rem;
box-sizing: border-box;
}
.stage-6 {
background: #09090e;
overflow: hidden;
}
/* gallery vars + keyframes (so the demo renders standalone) */
:root {
--ccg-bg: #0a0a0f;
--ccg-surface: #111118;
--ccg-surface2: #17171f;
--ccg-surface3: #1e1e28;
--ccg-border: rgba(255, 255, 255, 0.15);
--ccg-border2: rgba(255, 255, 255, 0.13);
--ccg-accent: #7c6cff;
--ccg-pink: #ff6c8a;
--ccg-green: #1ed98a;
--ccg-amber: #f5a84a;
--ccg-cyan: #3de8f5;
--ccg-text: #f0eeff;
--ccg-muted: #6b6987;
--ccg-label: #9896b8;
--ccg-mono: "DM Mono", "Fira Code", monospace;
--ccg-sans: "Syne", sans-serif;
} .card-spotlight {
width: 200px;
padding: 20px;
border-radius: 14px;
background: #111118;
border: 1px solid var(--ccg-border);
position: relative;
overflow: hidden;
cursor: none;
}
.spotlight-glow {
position: absolute;
width: 140px;
height: 140px;
border-radius: 50%;
background: radial-gradient(circle, rgba(124, 108, 255, 0.22) 0%, transparent 70%);
pointer-events: none;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
transition: opacity 0.3s;
opacity: 0;
}
.card-spotlight:hover .spotlight-glow {
opacity: 1;
}
.card-spotlight:hover {
border-color: rgba(124, 108, 255, 0.4);
}
.spot-content {
position: relative;
z-index: 1;
}
.card-spotlight h4 {
font-size: 13px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.card-spotlight p {
font-size: 11px;
color: var(--ccg-muted);
line-height: 1.5;
}
.spot-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: #fff;
}
/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
width: 100%;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 2.5rem 1.5rem;
box-sizing: border-box;
}
.stage-6 {
background: #09090e;
overflow: hidden;
}
/* gallery vars + keyframes (so the demo renders standalone) */
:root {
--ccg-bg: #0a0a0f;
--ccg-surface: #111118;
--ccg-surface2: #17171f;
--ccg-surface3: #1e1e28;
--ccg-border: rgba(255, 255, 255, 0.15);
--ccg-border2: rgba(255, 255, 255, 0.13);
--ccg-accent: #7c6cff;
--ccg-pink: #ff6c8a;
--ccg-green: #1ed98a;
--ccg-amber: #f5a84a;
--ccg-cyan: #3de8f5;
--ccg-text: #f0eeff;
--ccg-muted: #6b6987;
--ccg-label: #9896b8;
--ccg-mono: "DM Mono", "Fira Code", monospace;
--ccg-sans: "Syne", sans-serif;
}const card = document.getElementById("spotCard");
const glow = document.getElementById("spotGlow");
card.addEventListener("mousemove", (e) => {
const r = card.getBoundingClientRect();
glow.style.left = e.clientX - r.left + "px";
glow.style.top = e.clientY - r.top + "px";
}); const card = document.getElementById("spotCard");
const glow = document.getElementById("spotGlow");
card.addEventListener("mousemove", (e) => {
const r = card.getBoundingClientRect();
glow.style.left = e.clientX - r.left + "px";
glow.style.top = e.clientY - r.top + "px";
});More from 20 CSS Cards with Animations
Notification Stack CardSkeleton Loader CardMagazine Card3D Mouse Tilt CardInteractive Vote CardGlassmorphism CardNeon Gradient Border Card3D Flip CardAnimated Gradient Border CardStacked Paper CardHolographic Shimmer CardSlide Reveal Card
View the full collection →