Glass Morphism create 3d shapes using pure css

Few days ago I was experimenting in figma to find different use cases for the new trend "Glass Morphism. More specifically i was trying to find that can it be used to create 3d glass shapes. Yes with a few layers stacked together it can be done. One has to have little knowledge of perspective.

Checkout the design files.

Behance Post

Use Cases

1. The trick can be used to create 3d assets, specially frosted glass.

2. It can used to create complex gradients.

Checkout the HTML and CSS version here. Mix and Match play with the code on code pen. do let me know your thoughts.

CodePen Post

1. how to create a div in perspective,
2. how to apply gradient background/color to a Text element
3. how to create objects that look like frosted glass

If you have any question, do let me know.

Comments

[Cornea Florin]

That is what I call "thinking outside the box"!, Nicely done!!

[Rahul Singh]

Thanks man for the kinds words. I really appreciate that 👍.