Glassmorphism Generator

Create stunning frosted glass UI effects with live preview and export CSS code instantly

Glass Color

Blur16px

Opacity25%

Saturation140%

Border Opacity30%

Border Radius16px

Background

Custom Background

Start Color

End Color

Presets

CSS Code

background: rgba(255, 255, 255, 0.25);

backdrop-filter: blur(16px) saturate(140%);

-webkit-backdrop-filter: blur(16px) saturate(140%);

border-radius: 16px;

border: 1px solid rgba(255, 255, 255, 0.30);

Glassmorphism CSS Properties

Backdrop Filter | The key property for glassmorphism. Applies blur and saturation effects to the area behind the element, creating the frosted glass look.

Background Opacity | A semi-transparent background color lets the blur effect show through while providing enough contrast for content readability.

Border | A subtle semi-transparent border enhances the glass edge effect and helps distinguish the element from the background.

How to Use

Adjust Controls | Use the sliders to fine-tune the blur amount, background opacity, saturation, border opacity, and border radius until you achieve the desired glass effect.

Copy & Use | Click the "Copy CSS"button to copy the generated CSS code. Paste it into your stylesheet and apply the class to any element for an instant glassmorphism effect.