Design language

Glassmorphism

A visual style built from translucent surfaces that blur whatever sits behind them. Interfaces read as layers of frosted glass floating over a colorful background.

What makes glass, glass

Translucency

Surfaces use a low-opacity white fill, so the background stays visible through every panel instead of being covered by it.

Backdrop blur

The frosted effect comes from blurring what sits behind the surface. Blur separates the layer from the background and keeps text readable on top of it.

Luminous border

A one-pixel semi-transparent white border catches the light along each edge, the way a real pane of glass does.

Layered depth

Soft, generous shadows lift each pane off the canvas. Stacked panels at different blur levels create a clear sense of what is near and what is far.

Vivid backdrop

Glass needs something to refract. Colorful gradients and floating shapes behind the panels are what make the translucency and blur visible at all.

Soft geometry

Large corner radii and pill shapes suit the material. Hard corners break the illusion; rounded panes feel like polished glass.

Stacking glass

Each layer adds a little more white to its fill. Deeper surfaces get more opaque, so text keeps its contrast no matter how many panes sit beneath it.

Layer 1 #FFFFFF1A · blur 10px

Layer 2 #FFFFFF33 · blur 14px

Layer 3 #FFFFFF80 · blur 18px

The top pane is the most opaque, so body copy set on it stays comfortably readable while the gradient still glows through the layers below.

Solid action Glass action

The recipe

Four properties produce the effect: a translucent fill, a backdrop blur, a light border, and a soft shadow. Everything else is the backdrop doing the work.

glass.css

.glass {
background: #FFFFFF1A;
backdrop-filter: blur(14px);
border: 1px solid #FFFFFF33;
box-shadow: 0 12px 32px #00000033;
border-radius: 24px;
}