DEV Community

SumantaWeb
SumantaWeb

Posted on

2

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.

Top comments (4)

Collapse
 
pachverb profile image
new/bird

what that means ?

Collapse
 
sumanta_thefrontdev profile image
SumantaWeb

Well Do you Want to know what is glassmorphism??

Collapse
 
pachverb profile image
new/bird

yes

Thread Thread
 
sumanta_thefrontdev profile image
SumantaWeb

Google it. It's a cool effect

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more