Skip to main content

Glassmorphism Generator

Generate frosted glass effects with CSS backdrop-filter

Preview

Live glassmorphism preview

Glassmorphism

A modern UI design trend featuring frosted glass effects with blur, transparency, and subtle borders.

Settings

Adjust glassmorphism properties

10px
0.25
0.18
0.10
16px
/* Glassmorphism */
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);

How to Use

1. Adjust the blur level for the frosted glass effect

2. Set transparency to control how much the background shows through

3. Choose a background color (white works best for light themes)

4. Fine-tune border and shadow opacity for subtle depth

5. Copy the generated CSS to use in your project

Note: backdrop-filter may not work in all browsers. The CSS includes -webkit prefix for Safari support.