Glassmorphism Card

CSS frosted glass card with custom blur, opacity and content. Copy the code instantly.

Premium Plan

Everything you need to build modern interfaces fast.

POPULAR

CSS Output

Card Title

Card Body

Tag Text

Blur 10px

Background Opacity 5%

Border Opacity 10%

📦 UIFlow Components Pack

28 ready-made CSS components — buttons, cards, toasts, modals. One-time, €12.

✓ Matching set, tested together · ✓ Commercial & client projects OK · ✓ Instant download

€12 →

🎁 Not ready to buy? Get 10 free CSS presets →

About Glassmorphism Cards

Glassmorphism uses backdrop-filter: blur() to create a frosted glass effect. The key is combining a semi-transparent background (rgba with low opacity), a subtle border at rgba(255,255,255,.1), and a blur backdrop. Requires a non-solid background behind the card to show the blur effect — it won't appear on a plain dark background.