Card Glow Effect
A feature card floats on a colored glow that drifts slowly beneath it, then lifts and blooms brighter on hover. The glow is a blurred, oversized gradient behind the card that slides in place.
Also known as: card glow effect, glowing card css, card hover glow css, colored shadow card.
Realtime sync
Edits land on every device in under 50 ms.
HTML
<div class="bdr-card-glow-effect">
<span class="bdr-card-glow-effect-glow" aria-hidden="true"></span>
<div class="bdr-card-glow-effect-card">
<svg class="bdr-card-glow-effect-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3L5 13.5h6L10 21l8-10.5h-6z"/></svg>
<span class="bdr-card-glow-effect-title">Realtime sync</span>
<span class="bdr-card-glow-effect-text">Edits land on every device in under 50 ms.</span>
</div>
</div>CSS
.bdr-card-glow-effect {
--c: var(--bdr-color, #3b82f6);
font-size: var(--bdr-size, 16px);
--ease: cubic-bezier(0.2, 0.9, 0.3, 1.2);
position: relative;
isolation: isolate;
display: grid;
width: 14em;
font-family: system-ui, sans-serif;
}
.bdr-card-glow-effect-glow {
position: absolute;
inset: 1.2em 0.8em -0.4em;
z-index: -1;
border-radius: 1.5em;
background: linear-gradient(90deg, var(--c), color-mix(in oklch, var(--c), #d946ef 70%), color-mix(in oklch, var(--c), #f97316 75%), color-mix(in oklch, var(--c), #d946ef 70%), var(--c)) 0 0 / 200% 100%;
filter: blur(1.1em);
opacity: 0.55;
transition: opacity 0.4s ease, inset 0.5s var(--ease);
animation: bdr-card-glow-effect-drift 6s linear infinite;
}
.bdr-card-glow-effect-card {
display: grid;
gap: 0.3em;
padding: 1.2em 1.25em 1.3em;
border: 1px solid color-mix(in srgb, #fff 12%, transparent);
border-radius: 1em;
background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, #111522), #0c0f17);
box-shadow: inset 0 1px color-mix(in srgb, #fff 10%, transparent);
color: #f1f5f9;
transition: transform 0.5s var(--ease), border-color 0.3s ease;
}
.bdr-card-glow-effect-icon {
width: 1.35em;
height: 1.35em;
margin-bottom: 0.35em;
fill: color-mix(in srgb, var(--c) 40%, #fff);
}
.bdr-card-glow-effect-title { font-size: 0.95em; font-weight: 600; }
.bdr-card-glow-effect-text {
font-size: 0.75em;
line-height: 1.4;
color: color-mix(in srgb, #f1f5f9 60%, transparent);
}
.bdr-card-glow-effect:hover .bdr-card-glow-effect-glow {
inset: 0.4em -0.4em -0.8em;
opacity: 0.9;
}
.bdr-card-glow-effect:hover .bdr-card-glow-effect-card {
transform: translateY(-0.3em);
border-color: color-mix(in srgb, var(--c) 40%, transparent);
}
@keyframes bdr-card-glow-effect-drift {
to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.bdr-card-glow-effect-glow { animation: none; }
.bdr-card-glow-effect-glow,
.bdr-card-glow-effect-card { transition-duration: 0.01s; }
}
@media (prefers-reduced-motion: reduce) {
.bdr-card-glow-effect, .bdr-card-glow-effect *, .bdr-card-glow-effect::before, .bdr-card-glow-effect::after, .bdr-card-glow-effect *::before, .bdr-card-glow-effect *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bdr-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--bdr-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.