Glassmorphism Generator

v1.0.1

Design glassmorphism card effects with live preview and copy the generated CSS.

Designs glassmorphism card effects — frosted-glass look — with configurable blur, transparency, border opacity, and background colour, with live preview and copy-ready CSS.

How to use

→Adjust the backdrop-filter blur, background alpha, and border opacity sliders.
→Preview updates on the sample card; toggle a background image to test the effect.
→Copy the generated CSS: backdrop-filter, background, border, and box-shadow.

Blur (12px)

BG opacity (20%)

Border opacity (30%)

Border radius (16px)

Shadow intensity (30%)

Background colour

#ffffff

CSS

.glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.30);
}

Preview

Glass Card

Glassmorphism preview