Liquid Glass Card
A slab of liquid glass gliding over a striped sunset: the middle stays clear while the rim bends every line, like thick glass. SVG displacement for the refraction, frosted fallback elsewhere.
Also known as: liquid glass css, liquid glass effect css, apple liquid glass css.
Liquid Glass
Light bends at the edge
HTML
<div class="gls-liquid-glass-card">
<span class="gls-liquid-glass-card-sun" aria-hidden="true"></span>
<span class="gls-liquid-glass-card-hills" aria-hidden="true"></span>
<div class="gls-liquid-glass-card-pane">
<span class="gls-liquid-glass-card-lens" aria-hidden="true"></span>
<p class="gls-liquid-glass-card-kicker">Liquid Glass</p>
<p class="gls-liquid-glass-card-title">Light bends at the edge</p>
</div>
<svg class="gls-liquid-glass-card-svg" width="0" height="0" aria-hidden="true" focusable="false">
<filter id="gls-liquid-glass-card-lens" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
<feImage href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3ClinearGradient id='x'%3E%3Cstop offset='0' stop-color='%23800000'/%3E%3Cstop offset='0.05' stop-color='%23cc0000'/%3E%3Cstop offset='0.22' stop-color='%23800000'/%3E%3Cstop offset='0.78' stop-color='%23800000'/%3E%3Cstop offset='0.95' stop-color='%23330000'/%3E%3Cstop offset='1' stop-color='%23800000'/%3E%3C/linearGradient%3E%3ClinearGradient id='y' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23008000'/%3E%3Cstop offset='0.09' stop-color='%2300cc00'/%3E%3Cstop offset='0.34' stop-color='%23008000'/%3E%3Cstop offset='0.66' stop-color='%23008000'/%3E%3Cstop offset='0.91' stop-color='%23003300'/%3E%3Cstop offset='1' stop-color='%23008000'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23x)'/%3E%3Crect width='1' height='1' fill='url(%23y)' style='mix-blend-mode:screen'/%3E%3C/svg%3E" preserveAspectRatio="none" result="map"/>
<feDisplacementMap in="SourceGraphic" in2="map" scale="44" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
</div>CSS
.gls-liquid-glass-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(180deg, color-mix(in srgb, var(--c) 55%, #1e1b4b) 0%, color-mix(in srgb, var(--c) 30%, #9d174d) 55%, #f97316 100%);
color: #fff;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.3;
}
.gls-liquid-glass-card-sun {
position: absolute;
left: 50%;
top: 1.3em;
width: 7.4em;
height: 7.4em;
margin-left: -3.7em;
border-radius: 50%;
background:
repeating-linear-gradient(180deg, transparent 0 0.5em, color-mix(in srgb, var(--c) 35%, #831843) 0.5em 0.85em) 0 55% / 100% 45% no-repeat,
linear-gradient(180deg, #fef08a, #fb923c 60%, #ec4899);
box-shadow: 0 0 2.5em rgb(251 146 60 / 0.45);
}
.gls-liquid-glass-card-hills {
position: absolute;
inset: auto 0 0;
height: 4.2em;
background:
radial-gradient(60% 100% at 18% 100%, color-mix(in srgb, var(--c) 45%, #1e1b4b) 98%, transparent 100%),
radial-gradient(55% 90% at 82% 100%, color-mix(in srgb, var(--c) 35%, #312e81) 98%, transparent 100%),
linear-gradient(transparent 55%, color-mix(in srgb, var(--c) 40%, #0f172a) 55%);
}
.gls-liquid-glass-card-pane {
position: relative;
isolation: isolate;
display: grid;
align-content: end;
width: 10.5em;
height: 6em;
padding: 0.9em 1em;
border-radius: 1.5em;
box-shadow: 0 1em 2em -0.8em rgb(0 0 0 / 0.55);
animation: gls-liquid-glass-card-glide 7s ease-in-out infinite alternate;
}
.gls-liquid-glass-card-pane::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
border-radius: inherit;
background: rgb(255 255 255 / 0.05);
-webkit-backdrop-filter: blur(0.14em) saturate(1.7) brightness(1.08);
backdrop-filter: blur(0.14em) saturate(1.7) brightness(1.08);
}
.gls-liquid-glass-card-lens {
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
backdrop-filter: url(#gls-liquid-glass-card-lens);
}
.gls-liquid-glass-card-pane::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(160deg, rgb(255 255 255 / 0.2), transparent 40%);
box-shadow: inset 0.08em 0.1em 0.06em -0.04em rgb(255 255 255 / 0.75),
inset -0.08em -0.1em 0.06em -0.04em rgb(255 255 255 / 0.4),
inset 0 0 0 1px rgb(255 255 255 / 0.22);
pointer-events: none;
}
.gls-liquid-glass-card-kicker {
margin: 0;
font-size: 0.62em;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.85;
}
.gls-liquid-glass-card-title {
margin: 0.15em 0 0;
font-size: 0.95em;
font-weight: 700;
line-height: 1.2;
text-shadow: 0 0.05em 0.4em rgb(0 0 0 / 0.35);
}
.gls-liquid-glass-card-svg {
position: absolute;
width: 0;
height: 0;
}
@keyframes gls-liquid-glass-card-glide {
from { transform: translate(-3.6em, 0.3em) rotate(-2deg); }
to { transform: translate(3.6em, -0.3em) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
.gls-liquid-glass-card, .gls-liquid-glass-card *, .gls-liquid-glass-card::before, .gls-liquid-glass-card::after, .gls-liquid-glass-card *::before, .gls-liquid-glass-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.