DEV Community

Cover image for Glass Morphism create 3d shapes using pure css
Rahul Singh
Rahul Singh

Posted on

Glass Morphism create 3d shapes using pure css

Create Glass morphism in 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.

Top comments (2)

Collapse
 
florincornea profile image
Cornea Florin

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

Collapse
 
rahulkuulsingh profile image
Rahul Singh

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