CSS Modals & Overlays Effects

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.

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.

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.

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 centred rate-us dialog whose five grey stars light up amber one after another when hovered.

Two-pane settings dialog with a section rail on the left and the active pane on the right, fields and a switch included.

Shared window ringed in pulsing green with a floating status pill that counts the elapsed time and widens on hover to reveal its microphone and camera toggles.

Panel sliding in over a blurred scrim on a decelerating curve, so it settles rather than stopping dead at the edge.

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.

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.

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.

Confirmation dialog centred on a green tick disc that keeps sending a soft halo outward, with a single dismiss action.

Dimmed page with a consent bar pinned across its foot that grows upward on hover to unfold three category switches above the accept action.

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.

Three notifications piled in the corner of a page with only their top edges showing, springing apart into a readable column while the pointer is over the page.

A white popover with a caret pinned beneath its trigger button that springs downward and gains an accent ring on hover.

Frosted cheatsheet panel listing keyboard shortcuts as keycaps, rows highlighting as the pointer runs down the list.

Attachment list that blurs behind a dashed upload veil when files are dragged over it, the veil scaling up around a bobbing arrow and its size limits.

A pale share sheet with a row of app targets rises over a dimmed page and its icons hop in sequence 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.