Copied to clipboard!
rgba( 255, 255, 255, 0.25 );box-shadow:
0 8px 32px 0 rgba( 31, 38, 135, 0.37 );backdrop-filter:
blur( 4px );-webkit-backdrop-filter:
blur( 4px );border-radius:
1px solid rgba( 255, 255, 255, 0.18 );
What is Glassmorphism?
Glassmorphism is a unified name for the popular Frosted Glass aesthetic. It has many names depending on the company using it, so we wanted to create a common ground for designers and developers to find related resources easier and faster.
The effect is based on background blur with transparency, and uses stacked layers to show the depth and context of the interface.