Made with by HYPE4
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 );
Glassmorphism layers

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.

Read more