Glassmorphism Generator

Adjust blur, tint, opacity, and border to create a glassmorphism panel effect, with a live preview and copyable CSS.

Blur12pxBackground opacity20%Border opacity30%Border radius16pxGlass tint

Glass panel

background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.30);

Example input

blur: 12px

Example output

backdrop-filter: blur(12px);