Liquid Glass Border
A frosted glass pill over drifting color, its rim catching two specular highlights that slide around the edge as if the light were moving. Backdrop blur, an inset top sheen and a masked conic rim.
Also known as: liquid glass css, glass border animation, apple liquid glass effect css, specular border highlight.
Do Not DisturbUntil 6:00 PM
HTML
<div class="bdr-liquid-glass-border">
<span class="bdr-liquid-glass-border-blobs" aria-hidden="true"></span>
<div class="bdr-liquid-glass-border-pane">
<svg class="bdr-liquid-glass-border-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></svg>
<span class="bdr-liquid-glass-border-text"><b>Do Not Disturb</b>Until 6:00 PM</span>
</div>
</div>CSS
@property --bdr-liquid-glass-border-a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.bdr-liquid-glass-border {
--c: var(--bdr-color, #3b82f6);
font-size: var(--bdr-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 16em;
height: 9.5em;
overflow: hidden;
border-radius: 1.2em;
background: color-mix(in srgb, var(--c) 18%, #0b0d14);
font-family: system-ui, sans-serif;
}
.bdr-liquid-glass-border-blobs {
position: absolute;
inset: -40%;
background:
radial-gradient(22% 30% at 34% 40%, var(--c), transparent 70%),
radial-gradient(20% 26% at 64% 58%, color-mix(in oklch, var(--c), #f472b6 75%), transparent 70%),
radial-gradient(18% 24% at 52% 36%, color-mix(in oklch, var(--c), #fbbf24 80%), transparent 70%);
animation: bdr-liquid-glass-border-drift 9s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.bdr-liquid-glass-border-pane {
position: relative;
display: flex;
align-items: center;
gap: 0.7em;
padding: 0.85em 1.4em 0.85em 0.9em;
border-radius: 2em;
background: color-mix(in srgb, #fff 14%, transparent);
-webkit-backdrop-filter: blur(0.7em) saturate(1.6);
backdrop-filter: blur(0.7em) saturate(1.6);
box-shadow:
inset 0 1px color-mix(in srgb, #fff 45%, transparent),
inset 0 -1px color-mix(in srgb, #000 25%, transparent),
0 0.8em 2em -0.8em color-mix(in srgb, #000 60%, transparent);
color: #fff;
}
.bdr-liquid-glass-border-pane::before {
content: "";
position: absolute;
inset: 0;
padding: 1.5px;
border-radius: inherit;
background: conic-gradient(from var(--bdr-liquid-glass-border-a), color-mix(in srgb, #fff 95%, transparent), color-mix(in srgb, #fff 15%, transparent) 14%, color-mix(in srgb, #fff 8%, transparent) 36%, color-mix(in srgb, #fff 70%, transparent) 50%, color-mix(in srgb, #fff 12%, transparent) 64%, color-mix(in srgb, #fff 8%, transparent) 86%, color-mix(in srgb, #fff 95%, transparent));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
pointer-events: none;
animation: bdr-liquid-glass-border-turn 7s linear infinite;
}
.bdr-liquid-glass-border-icon {
flex: none;
width: 2em;
height: 2em;
padding: 0.45em;
box-sizing: border-box;
border-radius: 50%;
background: color-mix(in srgb, #fff 92%, transparent);
fill: color-mix(in srgb, var(--c) 70%, #312e81);
}
.bdr-liquid-glass-border-text {
display: grid;
gap: 0.15em;
font-size: 0.72em;
color: color-mix(in srgb, #fff 75%, transparent);
}
.bdr-liquid-glass-border-text b {
font-size: 1.2em;
font-weight: 600;
color: #fff;
}
@keyframes bdr-liquid-glass-border-turn {
to { --bdr-liquid-glass-border-a: 360deg; }
}
@keyframes bdr-liquid-glass-border-drift {
0% { transform: translate(-6%, -4%) rotate(0deg); }
100% { transform: translate(6%, 5%) rotate(40deg); }
}
@media (prefers-reduced-motion: reduce) {
.bdr-liquid-glass-border-blobs,
.bdr-liquid-glass-border-pane::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.bdr-liquid-glass-border, .bdr-liquid-glass-border *, .bdr-liquid-glass-border::before, .bdr-liquid-glass-border::after, .bdr-liquid-glass-border *::before, .bdr-liquid-glass-border *::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.