CSS Glassmorphism Generator

Create the frosted-glass (glassmorphism) effect in CSS with blur, transparency, saturation, border and radius, with live preview. No sign-up.

Preview
Background
Glassmorphism
Blur8px
Saturation150%
Opacity15%
Border30%
Radius16px
CSS code
background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px) saturate(150%);
-webkit-backdrop-filter: blur(8px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.3);

Remember the element must sit over some content (image or color) for the blur to show.

Everything is generated in your browser; nothing is sent to any server.
Compartir
Back to all tools