Aurora
Two blurred light orbs track cursor position independently, creating a living aurora borealis inside the card.
Aurora the 27th 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-27">
<div class="card-27__aurora"></div>
<div class="card-27__content">
<span class="card-27__tag">Aurora</span>
<h4 class="card-27__title">Aurora</h4>
<p class="card-27__body">Two light orbs follow your cursor through the card.</p>
</div>
</div> .card-27__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-27__title {
font-size: 17px;
font-weight: 700;
color: #f0eeff;
margin-bottom: 6px;
}
.card-27__body {
font-size: 13px;
color: #b8b6d4;
line-height: 1.6;
}
.card-27 {
width: 100%;
max-width: 280px;
position: relative;
overflow: hidden;
padding: 22px;
border-radius: 16px;
background: #050510;
border: 1px solid rgba(255, 255, 255, 0.08);
cursor: none;
min-height: 130px;
transition: border-color 0.4s;
}
.card-27:hover {
border-color: rgba(124, 108, 255, 0.4);
}
.card-27__aurora {
position: absolute;
inset: 0;
pointer-events: none;
}
.card-27__aurora::before,
.card-27__aurora::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(48px);
transition:
left 0.65s ease,
top 0.65s ease,
opacity 0.4s;
opacity: 0;
}
.card-27__aurora::before {
width: 160px;
height: 160px;
background: rgba(124, 108, 255, 0.55);
left: var(--ax, 20%);
top: var(--ay, 30%);
transform: translate(-50%, -50%);
}
.card-27__aurora::after {
width: 130px;
height: 130px;
background: rgba(30, 217, 138, 0.4);
left: var(--bx, 70%);
top: var(--by, 60%);
transform: translate(-50%, -50%);
}
.card-27:hover .card-27__aurora::before,
.card-27:hover .card-27__aurora::after {
opacity: 1;
}
.card-27__content {
position: relative;
z-index: 1;
} document.querySelectorAll(".card-27").forEach(function (card) {
var aurora = card.querySelector(".card-27__aurora");
card.addEventListener("mousemove", function (e) {
var r = card.getBoundingClientRect();
var x = ((e.clientX - r.left) / r.width) * 100;
var y = ((e.clientY - r.top) / r.height) * 100;
aurora.style.setProperty("--ax", x + "%");
aurora.style.setProperty("--ay", y + "%");
aurora.style.setProperty("--bx", (100 - x) + "%");
aurora.style.setProperty("--by", (100 - y) + "%");
});
});