What is Glassmorphism?

Glassmorphism is a design style, coined by Michal Malewicz from Hype4.Academy to connect and combine all of the uses of the “frosted glass” effect in the UI. By categorizing it and giving it a common name, it became easier to find and learn about it from resources all around the web.

After the initial article, written in November of 2020, the trend and the name exploded online, with its own #glassmorphism hashtag and thousands of UI exercises created in this style. You can read the original article here, at the academy as well.

Pixie - Frontend Unicorn book

Pixie

The Frontend Unicorn

🦄
🔥
🤩
+
Add to friends

SETTINGS

Color

CSS

Copied to clipboard!

background:
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:
10px;
border:
1px solid rgba( 255, 255, 255, 0.18 );