Glassmorphism Generator (Embed)

Glass Card

This is a glassmorphism preview with your settings applied. The frosted glass effect blurs the background behind the card.

Blur10px

Opacity20%

Border Width1px

Border Opacity30%

Border Radius16px

Background

Border

Shadow

CSS

background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.30);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

Browser support: backdrop-filter is supported in Chrome, Safari, Edge, and Firefox 103+. The -webkit- prefix is included for Safari compatibility.

🔒 All CSS generation happens in your browser. Nothing is sent anywhere.