Frosted glass
A translucent pane over slowly moving color.
Glass Modal Dialog
A confirm dialog in frosted glass that pops over a blurred, dimmed app, holds, then closes, on a loop you can pause by hovering. The overlay fades its opacity, never its blur radius, to stay cheap.
Also known as: glassmorphism modal css, glass popup css, frosted dialog box css.
Delete project?
This removes 24 files for everyone on the team.
HTML
<div class="gls-glass-modal-dialog">
<div class="gls-glass-modal-dialog-app" aria-hidden="true">
<span class="gls-glass-modal-dialog-top"></span>
<span class="gls-glass-modal-dialog-tile"></span>
<span class="gls-glass-modal-dialog-tile"></span>
<span class="gls-glass-modal-dialog-tile"></span>
</div>
<span class="gls-glass-modal-dialog-overlay" aria-hidden="true"></span>
<div class="gls-glass-modal-dialog-dialog" role="dialog" aria-modal="true" aria-label="Delete project">
<span class="gls-glass-modal-dialog-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V4.5h6V7M6.5 7l1 13h9l1-13"/></svg>
</span>
<p class="gls-glass-modal-dialog-title">Delete project?</p>
<p class="gls-glass-modal-dialog-text">This removes 24 files for everyone on the team.</p>
<div class="gls-glass-modal-dialog-actions">
<button class="gls-glass-modal-dialog-cancel" type="button">Cancel</button>
<button class="gls-glass-modal-dialog-delete" type="button">Delete</button>
</div>
</div>
</div>CSS
.gls-glass-modal-dialog {
--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: color-mix(in srgb, var(--c) 15%, #f1f5f9);
color: #0f172a;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.3;
}
.gls-glass-modal-dialog-app {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1.6em 1fr;
gap: 0.6em;
padding: 0.7em;
}
.gls-glass-modal-dialog-top {
grid-column: 1 / -1;
border-radius: 0.6em;
background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #1e293b) 0 2.5em, transparent 2.5em), rgb(255 255 255 / 0.8);
}
.gls-glass-modal-dialog-tile {
border-radius: 0.8em;
background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / 0.6), transparent 35%), linear-gradient(135deg, var(--a), var(--b));
}
.gls-glass-modal-dialog-tile:nth-child(2) { --a: color-mix(in srgb, var(--c) 40%, #fff); --b: var(--c); }
.gls-glass-modal-dialog-tile:nth-child(3) { --a: #fde68a; --b: #f97316; }
.gls-glass-modal-dialog-tile:nth-child(4) { --a: #f9a8d4; --b: #db2777; }
.gls-glass-modal-dialog-overlay {
position: absolute;
inset: 0;
background: rgb(15 23 42 / 0.3);
-webkit-backdrop-filter: blur(0.3em);
backdrop-filter: blur(0.3em);
animation: gls-glass-modal-dialog-overlay 6s ease infinite;
}
.gls-glass-modal-dialog-dialog {
position: relative;
display: grid;
justify-items: center;
width: 12.5em;
padding: 0.95em 1em 0.9em;
border-radius: 1.2em;
text-align: center;
background: color-mix(in srgb, #fff 55%, transparent);
-webkit-backdrop-filter: blur(0.9em) saturate(1.5);
backdrop-filter: blur(0.9em) saturate(1.5);
border: 1px solid color-mix(in srgb, #fff 45%, transparent);
box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
animation: gls-glass-modal-dialog-pop 6s cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
}
.gls-glass-modal-dialog:hover .gls-glass-modal-dialog-overlay,
.gls-glass-modal-dialog:hover .gls-glass-modal-dialog-dialog { animation-play-state: paused; }
.gls-glass-modal-dialog-icon {
display: grid;
place-items: center;
width: 2em;
height: 2em;
border-radius: 50%;
background: rgb(244 63 94 / 0.15);
color: #e11d48;
}
.gls-glass-modal-dialog-icon svg { width: 1.05em; height: 1.05em; }
.gls-glass-modal-dialog-title { margin: 0.45em 0 0; font-size: 0.9em; font-weight: 700; }
.gls-glass-modal-dialog-text {
margin: 0.25em 0 0.8em;
font-size: 0.64em;
line-height: 1.4;
color: rgb(15 23 42 / 0.7);
}
.gls-glass-modal-dialog-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.4em;
width: 100%;
}
.gls-glass-modal-dialog-actions button {
padding: 0.6em 0;
border: 0;
border-radius: 0.6em;
font: 650 0.66em/1 system-ui, sans-serif;
cursor: pointer;
transition: filter 0.2s ease, transform 0.2s ease;
}
.gls-glass-modal-dialog-actions button:hover { filter: brightness(1.08); transform: translateY(-0.08em); }
.gls-glass-modal-dialog-actions button:focus-visible { outline: 2px solid #0f172a; outline-offset: 0.15em; }
.gls-glass-modal-dialog-cancel {
background: rgb(255 255 255 / 0.55);
color: #0f172a;
box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.12);
}
.gls-glass-modal-dialog-delete { background: #e11d48; color: #fff; }
@keyframes gls-glass-modal-dialog-overlay {
0%, 6% { opacity: 0; }
16%, 80% { opacity: 1; }
92%, 100% { opacity: 0; }
}
@keyframes gls-glass-modal-dialog-pop {
0%, 12% { opacity: 0; transform: translateY(0.8em) scale(0.9); }
20% { opacity: 1; transform: translateY(-0.1em) scale(1.02); }
25%, 76% { opacity: 1; transform: translateY(0) scale(1); }
86%, 100% { opacity: 0; transform: translateY(0.4em) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
.gls-glass-modal-dialog, .gls-glass-modal-dialog *, .gls-glass-modal-dialog::before, .gls-glass-modal-dialog::after, .gls-glass-modal-dialog *::before, .gls-glass-modal-dialog *::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.