I want to apply a blur filter, like the menu in this site (when viewed on mobile): www. rolls-roycemotorcars. com/en_GB/home. It can be done - see the YouTube video “How to Create Frosted Glass Effect On Editor X” by I Love Editor X - but I haven’t been able to replicate. Can anyone paste the code snippet needed and where/how to insert? Thanks:)
The video is too long, so I didn’t watch it.
But you can do something like this:
Add an embedded widget (iframe) to your editorX.
Set its width to be 100%.
Align it to x: 0px;
Set its position to be pinned to page (=fixed position).
Put this code inside the widget:
<head>
<style>
body{
background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
}
</style>
</head>
You can play with the color, opacity and blur as you wish.
How useful CSS can be, right Miss Marlowe 
?
All my followers, non-followers and haters, push the VOTE-BUTTON here…
…just right now xD😆
Oh and by the way → this one, too…
https://www.wix.com/velo/requested-feature/moving-elements-on-page
Thanks so much, J.D. - truly you’re a Master 
@post96370 Yes, he is!
There are a few ways to do this.
If you want it exactly like the Royce website then you are going to have to take a few extra steps to ensure the quality of it.
You won’t get the actual “blur” effect unless you take the picture you want to blur and create a duplicate of it on your computer and add a Gaussian Blur to it using a third party image editing software like Paint . net, Photoshop, a phone app that adds Gaussian Blur to images, etc.
Once you do that, have the original picture on your site and then paste the blurred version on top, and then add the desired events that you want the box to do.
HOWEVER, the BEST way to achieve this is just to use an image of frosted glass texture and make it transparent on your site.
For example, take this image, paste it in your site and add transparency to it. It’s probably the easiest way to achieve the effect you want.
Hi J.D. I was wondering whether you’d be able to help. I have added an iframe with your code, however the edges of the iframe are clear and have no blur applied to them. Do you know how to get this effect up to the edges?
This errors occurs on all edges of the iframe box.
I hope someone can help.
Thanks,
I can’t tell without seeing it, but I’d try to add to the body css:
body{
background-color: rgba(0,0,0,0.1);
backdrop-filter: blur(5px);
margin: 0px;
}
Or to play with the blur value.
@jonatandor35
You hero! That’s done the trick, the blur is now going right up to the edge.
Incase you were wondering what the issue looked like, here is a before and after.
Subtle, but important! 
Hi, I found a great code that allows for some customization for the Gaussin Blur background. This works with the HTML Imbed.
Add the Blur {blur(2em)} to both the webkit and backdrop-filter, if they are not the same the code won’t work. (Works on Safari, Chrome, and Edge, not on Firefox) The higher the blur value the stronger the blur.
Works with Wix Editor and Editor X
<html>
<style>
html, body {
border: 0px solid rgba(0, 0, 0, .25);
border-radius: 0px;
margin: 0;
padding: 0;
width: auto;
height: auto;
}
body{
-webkit-backdrop-filter: blur(2em);
backdrop-filter:blur(2em)
}
</style>
<html>
God bless you
I only want to have this effect on one of my pages, but it is showing up on all of them, and I don’t know how to remove it. Does anyone know a solution?
Hello. Please start a new post with your question and the code snippet you used. This will more likely allow someone from the community to offer a solution. You may link this post as well in your own post if you feel the discussion is relevant. Closing comments on this post as it is a year old.