INTERACTION_010

Glass Panel.

Backdrop blur plus a translucent gradient and an inset top highlight. Reserved for floating control surfaces, never content cards.

CATEGORY: App UI
COMPLEXITY: Easy
TECH: CSS
PLATFORM: Both
PERFORMANCE: Medium

LIVE PLAYGROUND

GLASS / SURFACE

Blur 24px · edge light

CSS / CSS

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
              0 30px 80px -40px rgba(0, 0, 0, 0.9);
}

IF YOU LIKE THIS, STEAL THESE TOO.

All effects

TEXTURE / 3%

INTERACTION_024CSS

Grain Overlay

Film grain that stops black from looking flat.

Background / LightView

BORDER BEAM

INTERACTION_011CSS

Animated Border

A light travels the perimeter of the container.

Cards / MediumView

INTERACTION_029CSS

Modal Entry

Backdrop blurs while the panel scales up 2%.

App UI / MediumView

INTERACTION_030CSS

Page Entry

Route changes fade up with a trace of blur.

App UI / LightView