AI assistant
Drafts, summaries and replies in your own tone.
Glow Behind Card Hover
A soft, blurred gradient blooms out from behind the card and slowly drifts while you hover. The glow is a blurred pseudo-element under a solid inner card, so the content stays crisp.
Also known as: card glow effect css, gradient glow behind card, blurred shadow card hover.
HTML
<article class="hfx-card-glow-backdrop">
<div class="hfx-card-glow-backdrop-inner">
<span class="hfx-card-glow-backdrop-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.5c.7 5.2 4.3 8.8 9.5 9.5-5.2.7-8.8 4.3-9.5 9.5-.7-5.2-4.3-8.8-9.5-9.5 5.2-.7 8.8-4.3 9.5-9.5z"/></svg></span>
<h3>AI assistant</h3>
<p>Drafts, summaries and replies in your own tone.</p>
</div>
</article>CSS
.hfx-card-glow-backdrop {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
width: 13em;
font-family: system-ui, sans-serif;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-glow-backdrop:hover { transform: translateY(-0.2em); }
.hfx-card-glow-backdrop::before {
content: "";
position: absolute;
inset: 0.35em 0.2em;
border-radius: 1em;
background: linear-gradient(110deg, var(--c), color-mix(in oklch, var(--c), #ec4899 55%), color-mix(in oklch, var(--c), #22d3ee 55%), var(--c)) 0 0 / 300% 100%;
filter: blur(1em);
opacity: 0;
transform: scale(0.85);
transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-glow-backdrop:hover::before {
opacity: 0.95;
transform: translateY(0.15em) scale(1.03);
animation: hfx-card-glow-backdrop-drift 4s ease-in-out infinite alternate;
}
.hfx-card-glow-backdrop-inner {
position: relative;
box-sizing: border-box;
padding: 1.1em 1.2em 1.2em;
border: 1px solid color-mix(in srgb, #000 10%, transparent);
border-radius: 0.9em;
background: #fff;
color: #1f2937;
}
.hfx-card-glow-backdrop-icon {
display: grid;
place-items: center;
width: 2.3em;
height: 2.3em;
margin-bottom: 0.7em;
border-radius: 0.6em;
background: color-mix(in srgb, var(--c) 12%, transparent);
color: var(--c);
}
.hfx-card-glow-backdrop-icon svg {
width: 1.2em;
height: 1.2em;
fill: currentColor;
}
.hfx-card-glow-backdrop h3 {
font-weight: 600;
margin: 0 0 0.25em;
font-size: 1em;
}
.hfx-card-glow-backdrop p {
margin: 0;
font-size: 0.8em;
line-height: 1.45;
color: #6b7280;
}
@keyframes hfx-card-glow-backdrop-drift {
to { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.hfx-card-glow-backdrop, .hfx-card-glow-backdrop *, .hfx-card-glow-backdrop::before, .hfx-card-glow-backdrop::after, .hfx-card-glow-backdrop *::before, .hfx-card-glow-backdrop *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-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.