Glassmorphism Generator

Build perfect frosted-glass CSS in real-time with live preview.

Back to Home

Glassmorphism

Adjust the sliders to create your perfect frosted glass effect for UI components.

Blur 12px

Opacity 15%

Border Opacity 30%

Border Radius 16px

Saturation 1

Tint Color

About this Tool

Glassmorphism uses backdrop-filter, background with rgba, and border with rgba to create the iconic frosted glass UI trend. Adjust all parameters live and copy the final CSS.