Glassmorphism

Frosted glass effect trending in modern UI

Effect

Live preview

Preview

CSS

background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;

Browser support

backdrop-filter: Chrome 76+, Safari 9+, Firefox 103+. Not supported in IE.

Related tools

CSS Gradient Generator Box Shadow Generator CSS Property Explorer

Other CSS examples

Soft Box Shadow Elevated Box Shadow Neon Glow Shadow Blue to Purple Gradient Sunset Gradient Ocean Gradient Emerald Gradient Neumorphism Text Gradient Smooth Scroll Truncate Text (Ellipsis)Center with Position Center with Flexbox Center with Grid