Backdrops, sheets, drawers and dialog transitions.
The `<dialog>` element solved most of this: focus trapping, the backdrop pseudo-element, Escape to close and inert content behind it, all without JavaScript beyond `showModal()`. What is left is the look, which is what these are — backdrop blurs, entrance transitions and the bottom-sheet variant that a phone expects instead of a centred box.
Dialog over a frosted ocean backdrop; the scrim fades while the sheet lifts in.
Mobile-style bottom sheet with a grab handle and a blue accent, sliding up from the edge.
Alert dialog that springs in past its final size, topped with an ocean badge.
Product-tour spotlight: everything dims except a breathing circular cutout over the ocean surface.
⌘K palette on a blurred panel with an ocean selected row — the navigation surface every dev tool now ships.
Destructive-action confirm with a blue ring, warning glyph, and a ghost/solid button pair.
Destructive confirmation over a blurred scrim, with an ocean primary action.
Panel sliding in over a blurred scrim on a decelerating curve, so it settles rather than stopping dead at the edge.
Gallery overlay with prev/next controls and a thumbnail strip whose active frame is marked with an outline, so selection costs no layout.
Full-bleed navigation whose links rise on a stagger, with the siblings dimming on hover so the pointed-at item is the only bright one.
Centred confirmation led by a ringed icon, with the dismissive action styled quieter than the one you actually want pressed.
Non-blocking announcement that slides up from the corner with its own dismiss, the pattern for news that does not deserve a modal.
Blocking overlay scoped to one panel rather than the page, blurring the content behind so it is clearly still there but not interactive.
Dialog that grows from the footprint of the control that opened it to the whole viewport, its chrome fading in only after the box has finished travelling.
Three bottom sheets pushed one behind the other, each narrower and dimmer than the one in front, so depth in the navigation stack is legible without a back label.
Content fading under a gradient rather than cut off at a hard line, so the reader can see there is more without being able to read it — the fade is the argument.
Lightbox carrying real player chrome — scrubber, elapsed over total — under a blurred scrim, so the dialog reads as a player rather than a framed image.
A white popover with a caret pinned beneath its trigger button that springs downward and gains an accent ring on hover.
A pale share sheet with a row of app targets rises over a dimmed page and its icons hop in sequence on hover.
A centred rate-us dialog whose five grey stars light up amber one after another when hovered.
A picture-in-picture video overlay docked in the corner of a page that swells toward the cursor and advances its progress bar on hover.
A two-pane sign-in dialog with a violet artwork panel beside a compact form that lifts and tints its fields on hover.
A pale multi-step onboarding dialog with a segmented progress bar that advances a step and nudges its continue button on hover.
Destructive dialog whose delete button stays disabled and dull until the confirmation field is engaged, then turns live red.
Showing 24 of 31. Search the rest →
Dialogs, side panels, bottom sheets and confirmations.
Frosted panels with a blurred backdrop, in copy-paste CSS.
Browser chrome, phone frames, terminals and screenshot surrounds.
Alerts, banners and stacked toasts with timed dismissal.
Disclosure patterns built on details, radios and checkboxes.
Rings, stacks, statuses, frames and hover reveals.