DEV Community

SumantaGitWeb
SumantaGitWeb

Posted on

How To Glass Morph (Only CSS)!!

The Things you need are simple..

A Good Background Image(to be blurred)
Some HTML Code..

So The Thing Which needs to be glassmorphed give it a class(eg. glassMorphism);

Then Style it..
After The Style giving it a border radius(transparent);

then paste this code--

"
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(5px);

"

Done!!
*Remember : It Should Have Padding.
Then you can change blur and color as you like.

Discussion (4)

Collapse
pachverb profile image
new/bird

what that means ?

Collapse
sumanta_thefrontdev profile image
SumantaGitWeb Author

Well Do you Want to know what is glassmorphism??

Collapse
pachverb profile image
new/bird

yes

Thread Thread
sumanta_thefrontdev profile image
SumantaGitWeb Author

Google it. It's a cool effect