Glassmorphism in Wix Studio

https://youtu.be/7-EgMP3prNI

Method 1: Containers

Inside the Wix Studio editor, you can use a Container element. In the Design settings in the Inspector panel, you can toggle on the "Apply glass effect" setting under Background color. When turned on, you can adjust the "Blur intensity" and background color.

Method 2: HTML Embed Code

Simply add an HTML Embed element to the section/container, stretch it, and paste in the code below. If you want to remove the rounded corners, change "scale(1)" to "scale(2)".

<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);
	  overflow: hidden;
    }
  </style>
</head>

Method 3: CSS

To generate a CSS blur effect, I use this website: https://css.glass/. Once you tweak the design to your liking, copy the CSS code and head back to the Wix Studio editor. Once in the editor, open the Coding panel and turn on Coding. Open the "global.css" file. Create a new class called ".glassEffect{}". Inside, paste the code that you copied from the website above. Lastly, on your Wix Studio artboard, select the element that you want to apply the glass effect to, and in the coding panel's, switch to "CSS Classes" and add "glassEffect" to the element. Note: When adding classes to elements in Wix Studio, you do not need to add the period before the class. But you still need to add it in the "global.css" file before the class title.

Enjoy!