Frosted panels with a blurred backdrop, in copy-paste CSS.
Glassmorphism is one property doing the work — `backdrop-filter: blur()` over a semi-transparent fill, with a hairline light border to fake the edge of the pane. It only reads as glass when there is something behind it to blur, so every one of these assumes a busy background and most of them ship one. The effect is expensive to composite, so use it on a handful of surfaces rather than a whole grid.
A frosted glass card with backdrop blur sitting over a colorful gradient plate — the classic iOS-style material.
Frosted glass card with an ocean radial glow behind the content.
Dialog over a frosted ocean backdrop; the scrim fades while the sheet lifts in.
Translucent button lit from above, picking up a blue edge and halo on hover.
Frosted tooltip with an ocean hairline and a real arrow, driven by data-attr — appears on focus as well as hover.
Glass panel over an ocean field — hovering pulls the blur back so the backdrop sharpens.
Upper cone draining and lower cone filling on matched clip-path keyframes, the whole body turning over only once the sand has run through.
A framed hourglass whose upper chamber empties through a thin stream into the heap below, and once the sand has run through the whole frame turns over to start again.
Remaining time read as sand rather than a bar — the level in the top cone drops while the heap in the bottom one builds, with a dashed grain stream falling through the waist and the whole glass turning over on hover.
Frosted toast with an ocean bar draining along the bottom to show time until dismiss.
Frosted floating dock whose icons spring up and take on the ocean gradient under the pointer.
⌘K palette on a blurred panel with an ocean selected row — the navigation surface every dev tool now ships.
Grouped list whose ocean date headers stick and blur the rows sliding beneath them.
Frosted mobile tab bar where the active item takes an ocean tint and lifts its icon.
Destructive confirmation over a blurred scrim, with an ocean primary action.
Inverting backdrop-filter revealed by an animated inset clip, with a lit scan edge riding the boundary so the wipe reads as an instrument passing over the plate.
Frosted cheatsheet panel listing keyboard shortcuts as keycaps, rows highlighting as the pointer runs down the list.
A four-color gradient that slowly pans its position to create a continuously morphing backdrop.
Three blurred colored orbs drifting on a dark surface — great for hero section backdrops.
A saturated conic wheel of seven colors that rotates continuously — striking as a hero panel backdrop.
A dark button with a skewed highlight band that sweeps across its surface on hover, like light catching glass.
Sticky-header pill navigation on a blurred translucent bar, with a blue active state.
Magnifier whose ring flattens into a bar and whose handle counter-rotates, turning the glass into a cross without swapping any element.
Overflow cue as a tinted shadow at whichever edge still has content past it, which survives a patterned backdrop where a fade-to-transparent mask would not.
Half and full snap points where the content owns the scroll and overscroll-contain keeps the page behind still. The drag handle is a real button, Escape and the backdrop close it, and safe-area padding keeps the last row pressable.
A modal on the native dialog element, which supplies the focus trap, inert background and top layer — plus the parts it does not: scroll lock that survives two dialogs, backdrop click, and an alertdialog that ignores it.
Gradients, waves, particles and meshes that move without JavaScript.
Lifts, tilts, spotlights and border reveals on a card surface.
Backdrops, sheets, drawers and dialog transitions.
Calendars, ranges, time fields and duration inputs.
Dialogs, side panels, bottom sheets and confirmations.
Navigation bars, mega menus, context menus and flyouts.