Glassmorphism Effect
Generate the popular "frosted glass" look using CSS backdrop-filter.
16px
60%
180%
Glass Effect
This is how your element looks with the backdrop-filter applied.
What is Glassmorphism?
Glassmorphism is a design trend that emphasizes light and dark objects placed on top of colorful
backgrounds.
A background-blur effect is placed on the objects which allows the background to shine through, giving them
the appearance of frosted glass.
The key CSS property used is backdrop-filter: blur().