Confirmation
A double-blur confirmation box in pure CSS: a backdrop-filter: blur(4px) veil dims the whole screen, then the 280 px box, blurred at 24 px, floats 5 px above it over 4 s — the page stays recognizable behind the question. No JavaScript: opening and closing are yours to wire.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Glassmorphism has 47 effects, including 6 free. Explore the category →
3 usage examples
How it works
Four layers inside a 360 × 260 px .glass-modal-scene screen (#080812 background, 16 px corners, overflow: hidden). At the bottom, three still blobs blurred at 30–35 px — a 120 px magenta #d946ef top left, a 100 px sky blue #0ea5e9 bottom right, an 80 × 120 px orange #f97316 on the right — standing in for the page. Above them, the .glass-modal-backdrop veil: position: absolute; inset: 0, 20% black, backdrop-filter: blur(4px), z-index: 1 — measured, it covers exactly the screen's 360 × 260 px. Then the .glass-modal-dialog box, z-index: 2: 280 px wide, centered with top/left: 50% and translate(-50%, -50%), 8% white, backdrop-filter: blur(24px), 12% white border, 16 px corners, a 0 16px 48px black shadow at 50%, 24 px padding, and a 135° highlight in ::before.
The double blur is the point of the effect: the 4 px veil keeps the page's shapes readable (a map, an exam paper, a drawing), and the 24 px box in turn blurs what passes behind it, already veiled — the question stands out on two planes. The box floats: modalFloat lifts it 5 px and lowers it again over 4 s, looping (the keyframes repeat the translate(-50%, -50%) so it never drifts off center). Inside: a 24 px close cross, an icon in a 40 px square with a violet → cyan gradient at 30%, a bold 15.2 px title, 11.5 px text at 50% white, and two buttons sharing the width — "Cancel" in glass, "Confirm" in a violet #8b5cf6 → indigo #6366f1 gradient with a violet shadow on hover.
The veil and the box each declare their blur in both forms, backdrop-filter and -webkit-backdrop-filter: Safari before version 18 only reads the second, and without it would show neither blur. What to know next: there is no JavaScript. The box is always shown, the cross is a div with no action, both buttons do nothing, and nothing declares the box as a dialog (no role="dialog", no aria-modal, no focus trap, no Escape key). It is the look of a confirmation, to be wired to your logic — see the FAQ.
Accessibility
- Role and focus: as is, a screen reader reads the box as ordinary text in the middle of the page, and Tab moves freely behind the veil. Use a
<dialog>element opened withshowModal()— it brings the role, isolation from the rest of the page, closing with Escape and focus return — or addrole="dialog",aria-modal="true"andaria-labelledbypointing at the title by hand, then move focus to the least risky button on open. - Close cross: it is a
divholding "✕", which the keyboard cannot reach and speech output may announce as a multiplication sign. Replace it with<button type="button" aria-label="Close">with the same style. - Contrast, measured on the original background: title 14.8:1, text 4.9:1, "Cancel" 7.5:1, cross 5.3:1. The white "Confirm" label drops to 4.2:1 on the light part of the violet gradient: darken the start (
#7c3aed) to pass 4.5:1. On a light page, tint the box dark (rgba(15,23,42,.5)), as in the map and exam scenes. - No prefers-reduced-motion in the code: the box keeps floating 5 px under emulation. An element that moves while someone reads a consequential question bothers some readers:
@media (prefers-reduced-motion: reduce) { .glass-modal-dialog { animation: none } }keeps it still and centered.
Browser compatibility
CSS only: two stacked backdrop-filters (with -webkit-backdrop-filter), filter: blur(), inset, @keyframes on transform, flexbox. Zero JavaScript, zero dependency. Backdrop blur: Chrome 76+, Edge 79+, Firefox 103+, Safari 9+ prefixed (prefix declared in the code), unprefixed since Safari 18. Measured in Chromium 151: both blurs are painted, the second applying to what the first has already veiled. In Firefox 153 and WebKit 26.5 under Playwright, blur(4px) and blur(24px) are computed, but their automated screenshots paint no backdrop blur, even on a minimal test: the double blur was only seen in Chromium. Position, size, float and hover are identical in Firefox.
Without backdrop blur, the veil stays a 20% black and the box an 8% white: the page stays sharp behind, and the hierarchy holds through the box's shadow and border. Plan a darker veil (40%) inside @supports not (backdrop-filter: blur(1px)) if the page behind is busy.
The code
HTML structure to paste into your page (the CSS + JS come with Premium):
<div class="demo-preview">
<div class="glass-modal-scene">
<div class="glass-modal-bg-shape glass-modal-bg-shape--1"></div>
<div class="glass-modal-bg-shape glass-modal-bg-shape--2"></div>
<div class="glass-modal-bg-shape glass-modal-bg-shape--3"></div>
<div class="glass-modal-backdrop"></div>
<div class="glass-modal-dialog">
<div class="glass-modal-close">✕</div>
<div class="glass-modal-icon">…</div>
<h3>…</h3>
<p>…</p>
<div class="glass-modal-actions">
<button class="glass-modal-btn glass-modal-btn--ghost">…</button>
<button class="glass-modal-btn glass-modal-btn--primary">…</button>
</div>
</div>
</div>
</div>The full HTML + CSS + JS of Confirmation, ready to paste — plus all 840 effects. Or $299 once, lifetime access.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Veil blur (CSS — .glass-modal-backdrop { backdrop-filter: blur(4px) }) |
4 px, 20% black | The most important setting: 2–4 px keep the page readable (you know what you are confirming), 8 px and more make it unrecognizable. On a light page, tint the veil slate (rgba(15,23,42,.3)). |
Box blur and tint (CSS — .glass-modal-dialog { background: rgba(255,255,255,.08); backdrop-filter: blur(24px) }) |
8% white, 24 px | Keep a clear gap with the veil (at least ×4) so the two planes read. Over a light backdrop, switch to rgba(15,23,42,.5): the white text stays readable. |
Veil extent (CSS — position: absolute; inset: 0) |
covers the .glass-modal-scene screen (360 × 260 px) |
To veil the whole page, switch the veil and the box to position: fixed and move them out of the scene (end of body). The box stays centered by top/left: 50%. |
Float (CSS — animation: modalFloat 4s, translateY(-5px)) |
5 px over 4 s, looping | Replace with a one-off entrance (from { opacity: 0; transform: translate(-50%, -46%) }) for a box that arrives and settles; or remove the animation. Keep translate(-50%, -50%) in every step, or the box drifts off center. |
Primary button (CSS — .glass-modal-btn--primary) |
#8b5cf6 → #6366f1 gradient, violet shadow on hover |
For a destructive action (erase, delete), switch it to red (#ef4444 → #dc2626) along with its hover shadow. Put the safe action on the left and the committing action on the right, as here. |
Page blobs (CSS — .glass-modal-bg-shape--1 to --3) |
magenta, sky blue, orange, still | They simulate a page behind the box. On your site, remove them: your real page is what the veil and the box blur. |
FAQ
<dialog class="glass-modal-dialog"> and open it with dialog.showModal(); buttons inside a <form method="dialog"> close it and return their value (dialog.returnValue), Escape closes it too, and the browser makes the rest of the page inert. Keep the veil div, shown together with the box (or toggled with the hidden attribute), to keep the first 4 px blur.
