Glass Card

This is a preview of your glassmorphism effect. Adjust the controls to customize.

Generated CSS

Pro Features

Preset Library

50+ curated glassmorphism styles ready to use

Multi-Layer Glass

Stack multiple glass layers with independent controls

Custom Backgrounds

Upload your own images as preview backgrounds

Animations

Add hover, entrance and scroll animations to glass

Unlock Pro Features

Get preset library, multi-layer glass, custom backgrounds, animations and more.

Support on Ko-fi

📖 Usage Guide & Examples

Modal & Dialog Overlays

Glassmorphism works beautifully for modals over colorful or blurred backgrounds. Use backdrop-filter with moderate blur (10–20px).

background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Navigation Cards

Keep background opacity low (0.08–0.15) for nav bars so content behind remains visible. Add a subtle bottom border for definition.

background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);

Colored Tinted Glass

Use brand colors with very low opacity for a tinted glass effect that maintains your design language.

background: rgba(99, 102, 241, 0.1); /* indigo tint */
backdrop-filter: blur(16px);
border: 1px solid rgba(99, 102, 241, 0.25);

❓ FAQ

What is glassmorphism?

Glassmorphism is a UI design style that simulates frosted glass using background blur, transparency, and subtle borders. It creates depth while maintaining content visibility behind elements.

Why does backdrop-filter not work in some browsers?

Safari requires -webkit-backdrop-filter as a prefix. Firefox had limited support historically but improved in recent versions. Always include both the prefixed and standard property. Test in all target browsers.

Does glassmorphism work over dark backgrounds?

Yes, but adjust the tint color. For dark backgrounds, use rgba with a white or light color at low opacity. For light backgrounds, you may use a slightly darker tint. The effect requires contrast between the element and the background behind it.

Can I combine glassmorphism with neumorphism?

Yes — this hybrid style uses soft shadows (neumorphism) alongside glass transparency. Use sparingly as combining both effects can become visually heavy.

How do I ensure accessibility?

Always test text contrast on glassmorphic backgrounds — the transparency can make text hard to read. Use a dark semi-transparent overlay for text areas if needed, and maintain WCAG AA contrast ratios (4.5:1 for normal text).

AI Glassmorphism Generator