Glass morphism in Wix Studio

Show and tell
,
1

What do you think? It’s really simple to create amazing things in Wix Studio :star_struck:

10 Likes
2

This is cool, but I think I must be blind. You mention to copy the code from the comments…I am not finding that code. Where exactly is it? Would love to be able to try this! :grin:

1 Like
3

Just a little helping hand for the code:

.boxblur {

-webkit-backdrop-filter: blur(25px);

backdrop-filter: blur(25px);

}
7 Likes
4

Love this! Thanks for sharing. I used glassmorphism on my agency site but the solution was more complex with an iframe… This is much more elegant and so practical as you can reuse it in one click on other elements!
I am updating my website as we speak. :rocket: :partying_face:

5 Likes
5

It would be great if you could share a link for all of us to see and take inspiration from or maybe put it in the showcase (:

1 Like
6

Super cool effect I’ve always wanted to know how to do this and this is a much easier way to do it

1 Like
7

That is super cool!!! thanks for including the code @noahlovell !

1 Like
8

You’re amazing…thanks! Can’t wait to try this!

1 Like
9

Would @hello18444 or anyone who’s familiar with CSS custom classes have an idea why this works on my header and bottom section but refuses to apply to the box elements I want it on ?

https://www.creablu.com/ - First box on the hero screen for an example of where it doesn’t work

12

You don’t need to use iframe anymore. Just add a class for your container in global.css file in the wix code editor or code panel and copy the boxblur code in it.

1 Like
13

@noahlovell Hello :wave: @hello18444
You could also try to use this code using Embed HTML

How to Embed HTML in Wix :

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); }

Of course CSS variables like pixels (px) , saturations (%) and others You can change according to the judgement

Hope it will help :slight_smile:

1 Like