Glassmorphism CSS Generator | 30tools | 30tools

Glass Properties

Blur16px

Transparency60%

Saturation180%

Border Radius16px

Glass Color

Border Outline

Preview

Glassmorphism

This is how your element will look against a background.

CSS Code

background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px) saturate(180%);
webkit-backdrop-filter: blur(16px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);

Tips

💡 Performs best over colorful, complex backgrounds.

💡 The 'border' adds a nice crisp edge to separate it from the background.

💡 'Backdrop-filter' has great support in modern browsers.