Why does my glass panel look flat?

backdrop-filter only blurs content behind the element. Put a photo or a gradient behind the panel, and keep the panel background partly transparent.

CSS Studio

Interactive Learning

On this tool

backdrop-filter does not blur the element’s own background. It blurs what is behind it. A flat page behind the card looks unchanged.

Effects

Glass needs something colorful behind the panel or backdrop-filter has nothing to blur. Neumorphism is a pair of box-shadows on a solid background.

What people get wrong

backdrop-filter does not blur the element’s own background. It blurs what is behind it. A flat page behind the card looks unchanged.

Why does my glass panel look flat?: backdrop-filter only blurs content behind the element. Put a photo or a gradient behind the panel, and keep the panel background partly transparent.

Glass Properties

Blur16px

Opacity0.7

Saturation180%

Border Alpha0.4

CSS Output

.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(209, 213, 219, 0.4);
}