Revenue
+12.4%
$48,290
Dark Glassmorphism Card
Smoked black glass over drifting neon glows, set up as a revenue tile. The sparkline draws itself, holds, then fades and redraws. A dark tint plus backdrop-filter keeps the glow soft.
Also known as: dark glassmorphism css, black glassmorphism css, smoked glass card.
HTML
<div class="gls-dark-glassmorphism-card">
<span class="gls-dark-glassmorphism-card-glow gls-dark-glassmorphism-card-glow-a" aria-hidden="true"></span>
<span class="gls-dark-glassmorphism-card-glow gls-dark-glassmorphism-card-glow-b" aria-hidden="true"></span>
<article class="gls-dark-glassmorphism-card-pane">
<div class="gls-dark-glassmorphism-card-head">
<span class="gls-dark-glassmorphism-card-label">Revenue</span>
<span class="gls-dark-glassmorphism-card-badge">+12.4%</span>
</div>
<p class="gls-dark-glassmorphism-card-value">$48,290</p>
<svg class="gls-dark-glassmorphism-card-chart" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true">
<defs>
<linearGradient id="gls-dark-glassmorphism-card-stroke" x1="0" x2="1"><stop offset="0" style="stop-color: var(--c)"/><stop offset="1" stop-color="#e879f9"/></linearGradient>
<linearGradient id="gls-dark-glassmorphism-card-fill" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#e879f9" stop-opacity="0.35"/><stop offset="1" stop-color="#e879f9" stop-opacity="0"/></linearGradient>
</defs>
<path class="gls-dark-glassmorphism-card-area" d="M0 24C8 22 12 14 20 16S32 26 40 20 52 8 60 12 72 22 80 14 92 4 100 6V30H0z" fill="url(#gls-dark-glassmorphism-card-fill)"/>
<path class="gls-dark-glassmorphism-card-line" d="M0 24C8 22 12 14 20 16S32 26 40 20 52 8 60 12 72 22 80 14 92 4 100 6" pathLength="100" fill="none" stroke="url(#gls-dark-glassmorphism-card-stroke)"/>
</svg>
</article>
</div>CSS
.gls-dark-glassmorphism-card {
--c: var(--gls-color, #3b82f6);
font-size: var(--gls-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 22em;
height: 12em;
border-radius: 1.25em;
overflow: hidden;
isolation: isolate;
background: linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, #05060b), #0a0a12);
color: #fff;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.3;
}
.gls-dark-glassmorphism-card-glow {
position: absolute;
z-index: -1;
width: 9em;
height: 9em;
border-radius: 50%;
}
.gls-dark-glassmorphism-card-glow-a {
left: 1.5em;
top: -1.5em;
background: radial-gradient(closest-side, var(--c), transparent);
animation: gls-dark-glassmorphism-card-drift 7s ease-in-out infinite alternate;
}
.gls-dark-glassmorphism-card-glow-b {
right: 1em;
bottom: -2em;
background: radial-gradient(closest-side, #d946ef, transparent);
animation: gls-dark-glassmorphism-card-drift 8s ease-in-out -3s infinite alternate-reverse;
}
.gls-dark-glassmorphism-card-pane {
width: 14.5em;
padding: 0.95em 1.1em 0.8em;
border: 1px solid rgb(255 255 255 / 0.1);
border-radius: 1.1em;
background: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.01)), rgb(8 8 14 / 0.4);
-webkit-backdrop-filter: blur(1em) saturate(1.6);
backdrop-filter: blur(1em) saturate(1.6);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1em 2.2em -1em rgb(0 0 0 / 0.9);
}
.gls-dark-glassmorphism-card-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.gls-dark-glassmorphism-card-label {
font-size: 0.7em;
font-weight: 550;
color: rgb(255 255 255 / 0.6);
}
.gls-dark-glassmorphism-card-badge {
padding: 0.25em 0.6em;
border-radius: 99em;
background: rgb(34 197 94 / 0.15);
color: #4ade80;
font-size: 0.6em;
font-weight: 700;
}
.gls-dark-glassmorphism-card-value {
margin: 0.15em 0 0.35em;
font-size: 1.7em;
font-weight: 700;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.gls-dark-glassmorphism-card-chart {
display: block;
width: 100%;
height: 2.6em;
overflow: visible;
}
.gls-dark-glassmorphism-card-line {
stroke-width: 0.16em;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
stroke-dasharray: 100;
animation: gls-dark-glassmorphism-card-draw 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.gls-dark-glassmorphism-card-area { animation: gls-dark-glassmorphism-card-area 4.5s ease infinite; }
@keyframes gls-dark-glassmorphism-card-draw {
0% { stroke-dashoffset: 100; opacity: 1; }
45%, 82% { stroke-dashoffset: 0; opacity: 1; }
96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes gls-dark-glassmorphism-card-area {
0%, 25% { opacity: 0; }
50%, 82% { opacity: 1; }
96%, 100% { opacity: 0; }
}
@keyframes gls-dark-glassmorphism-card-drift {
to { transform: translate(4em, 1.5em) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.gls-dark-glassmorphism-card, .gls-dark-glassmorphism-card *, .gls-dark-glassmorphism-card::before, .gls-dark-glassmorphism-card::after, .gls-dark-glassmorphism-card *::before, .gls-dark-glassmorphism-card *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--gls-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--gls-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.