DEV Community

loading...
Cover image for Glass Morphism create 3d shapes using pure css

Glass Morphism create 3d shapes using pure css

rahulkuulsingh profile image Rahul Singh ・1 min read

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.

Discussion (2)

pic
Editor guide
Collapse
florincornea profile image
Cornea Florin

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

Collapse
rahulkuulsingh profile image
Rahul Singh Author

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