How it works
Set your background, glass tint, blur strength, border alpha, and shadow depth. The preview updates instantly and the export section gives production-ready snippets for CSS, SCSS, and Tailwind workflows.
Build frosted-glass UI cards, tune all values in real time, and export ready-to-use CSS, SCSS and Tailwind.
Premium
**** **** **** 4242
Card Holder
Alex Johnson
Expires
08/29
1.glass-card {2 background: rgba(255, 255, 255, 0.2);3 border: 1px solid rgba(255, 255, 255, 0.28);4 border-radius: 24px;5 box-shadow: 0 10px 32px rgba(0, 0, 0, 0.24);6 backdrop-filter: blur(18px) saturate(150%);7 -webkit-backdrop-filter: blur(18px) saturate(150%);8 padding: 28px;9}Set your background, glass tint, blur strength, border alpha, and shadow depth. The preview updates instantly and the export section gives production-ready snippets for CSS, SCSS, and Tailwind workflows.