Open Site Navigation

Glassmorphism in Editor X

In today's lesson, you will learn how to create a blurry background effect in Editor X. This is a really modern cool effect that you can easily add to your websites.


This technique was originally posted in the Editor X Community FaceBook group. Be sure to join that group to learn more about cool things you can do in Editor X.


Glassmorphism Effect in Wix / Editor X

Before you copy the code to your website, be sure to watch our video to learn how to set it up on your website correctly:



Now that you know how to set it up correctly on your website, here is the code:

 

<head>

<style>

body{

background-color: rgba(0,0,0,0);

backdrop-filter: blur(40px);

transform: scale(1);

border-radius: 24px;

-webkit-backdrop-filter: saturate(180%) blur(40px);

backdrop-filter: saturate(180%) blur(40px);

}

</style>

</head>

 

Have Fun!!!