CSS Glassmorphism Generator

Create stunning glass effects. Frosted panels, translucent cards, copy CSS instantly.

⌘+C Copy CSS⌘+T Tailwind⌘+S Save⌘+R Random

Glass Card

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

CSS Code
.glass-card {
  background: #ffffff26;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid #ffffff4d;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}
#ffffff
#ffffff

Glass Presets (12)

Frequently Asked Questions

Common questions about Glassmorphism

01

What is Glassmorphism?

02

How does backdrop-filter work?

03

Is Glassmorphism supported in all browsers?

04

What's the ideal blur value?

05

Can I use Glassmorphism on images?

06

How do I make text readable on glass?