🎨CSS & Color

Glassmorphism Card Effect

Frosted glass effect using backdrop-filter.

Explanation

A popular modern UI trend that mimics translucent glass over colorful backgrounds.

Examples

Glass Setup

Output

blur: 10px, opacity: 0.2

Code Examples

CSS

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
}

Try it Now

Open in Glassmorphism

💡 Tips

Works best over busy or colorful backgrounds
The white border (1px) is critical for the "glass" look
Keep text contrast in mind

⚠️ Common Pitfalls

Can be heavy on browser performance if overused