Glassmorphism Gallery

The aesthetic of translucent layers, frosted glass, and ethereal depth

L

Light Diffusion

Glassmorphism uses background blur to create the illusion of frosted glass. Light passes through but details become soft, creating visual hierarchy without harsh boundaries.

T

Transparency

Elements float above colorful backgrounds. The partial transparency reveals underlying gradients, creating depth and dimensionality in flat design.

B

Borders

Subtle borders with low opacity define edges without creating harsh lines. Often lighter on top and left to simulate lighting from above.

S

Shadows

Soft, diffused shadows enhance the floating effect. Unlike neumorphism, glassmorphism shadows are subtle and don't compete with the blur effect.

C

Color

Vibrant gradient backgrounds are essential. The glass effect needs rich colors to blur into beauty. Monochrome backgrounds diminish the effect.

H

Hierarchy

Multiple glass layers at different blur levels create visual depth. More blur = further back. Less blur = closer to the user.

CSS Properties

20px Blur Radius
15% Background Alpha
20px Border Radius
0.2 Border Opacity

Implementation

.glass-element {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Interactive Demo

Adjust the blur intensity:

Glass Effect