Design a frosted-glass (glassmorphism) card by adjusting the backdrop blur, the tint color and its opacity, the corner radius and the border strength. The preview places a glass card over a colorful gradient so you can see exactly how the blur and translucency interact with what is behind it, and the full CSS — including backdrop-filter — is generated below.
Glassmorphism relies on backdrop-filter, which is supported in modern browsers; the tool also outputs the -webkit- prefixed version for wider coverage. Copy the block and apply it to any element that sits over a busy background. Everything runs locally in your browser, so nothing is uploaded.