Code Flick TechnologiesToolscodeftech.com

Glassmorphism Generator

Build a glassmorphism panel — backdrop blur, transparency, border, shadow. Live preview over a colorful background, copy-ready CSS.

100% in your browser. Files never uploaded.
Glass panel
CSS
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);

How to use

  1. 1
    Tweak blur, opacity, tint, radius
    The colorful background helps you see the frosted effect.
  2. 2
    Copy the CSS
    Includes the WebKit prefix.

Related tools