# Blur filter -?

**URL:** <https://forum.wixstudio.com/t/blur-filter/4440>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [November 10, 2021, 6:12pm UTC](https://forum.wixstudio.com/t/blur-filter/4440 "2021-11-10T18:12:44Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![post96370](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/post96370/32/82106_2.png) [@post96370](https://forum.wixstudio.com/u/post96370)\
**Post date:** [November 10, 2021, 6:12pm UTC](https://forum.wixstudio.com/t/blur-filter/4440/1 "2021-11-10T18:12:44Z")

</div>

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:)

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [November 10, 2021, 9:40pm UTC](https://forum.wixstudio.com/t/blur-filter/4440/2 "2021-11-10T21:40:24Z")

</div>

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:

```javascript
<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.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [November 11, 2021, 6:12am UTC](https://forum.wixstudio.com/t/blur-filter/4440/3 "2021-11-11T06:12:06Z")

</div>

How useful CSS can be, right Miss Marlowe 😁?

All my followers, non-followers and haters, push the VOTE-BUTTON here…

> **[VelobyWix-new C](https://www.wix.com/velo/requested-feature/css-feature)**

…just right now xD😆

Oh and by the way → this one, too…

[https://www.wix.com/velo/requested-feature/moving-elements-on-page](https://www.wix.com/velo/requested-feature/moving-elements-on-page)

---

<div class="post-metadata">

**Author:** ![post96370](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/post96370/32/82106_2.png) [@post96370](https://forum.wixstudio.com/u/post96370)\
**Post date:** [November 11, 2021, 6:17am UTC](https://forum.wixstudio.com/t/blur-filter/4440/4 "2021-11-11T06:17:21Z")

</div>

Thanks so much, J.D. - truly you’re a Master 🙂

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [November 11, 2021, 6:36am UTC](https://forum.wixstudio.com/t/blur-filter/4440/5 "2021-11-11T06:36:55Z")

</div>

@post96370 Yes, he is!

---

<div class="post-metadata">

**Author:** ![josephchancewatkins](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/josephchancewatkins/32/30772_2.png) [@josephchancewatkins](https://forum.wixstudio.com/u/josephchancewatkins)\
**Post date:** [November 11, 2021, 6:51am UTC](https://forum.wixstudio.com/t/blur-filter/4440/6 "2021-11-11T06:51:25Z")

</div>

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.

 ![](https://us1.discourse-cdn.com/wix/original/3X/4/1/41cbe55a41802ca889b0ab35ed1f2a9979bfe81c.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![hugo-parnell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/hugo-parnell/32/31890_2.png) [@hugo-parnell](https://forum.wixstudio.com/u/hugo-parnell)\
**Post date:** [January 25, 2022, 2:41pm UTC](https://forum.wixstudio.com/t/blur-filter/4440/7 "2022-01-25T14:41:46Z")

</div>

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,

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [January 26, 2022, 12:29am UTC](https://forum.wixstudio.com/t/blur-filter/4440/8 "2022-01-26T00:29:40Z")

</div>

I can’t tell without seeing it, but I’d try to add to the body css:

```javascript
  body{  
    background-color: rgba(0,0,0,0.1); 
    backdrop-filter: blur(5px);
    margin: 0px;
}

```

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [January 26, 2022, 12:30am UTC](https://forum.wixstudio.com/t/blur-filter/4440/9 "2022-01-26T00:30:59Z")

</div>

Or to play with the blur value.

---

<div class="post-metadata">

**Author:** ![hugo-parnell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/hugo-parnell/32/31890_2.png) [@hugo-parnell](https://forum.wixstudio.com/u/hugo-parnell)\
**Post date:** [January 26, 2022, 3:48am UTC](https://forum.wixstudio.com/t/blur-filter/4440/10 "2022-01-26T03:48:42Z")

</div>

@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! :+1:t2:

 ![](https://us1.discourse-cdn.com/wix/original/3X/3/0/3001be04019109b1b9d4596f1d644857fa4c0405.jpeg)

 ![](https://us1.discourse-cdn.com/wix/original/3X/f/9/f9f6d1f4afe441d23f559e5c92e8ef544e1e065e.jpeg)

---

<div class="post-metadata">

**Author:** ![stan-michael-termini](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stan-michael-termini/32/1586_2.png) [@stan-michael-termini](https://forum.wixstudio.com/u/stan-michael-termini)\
**Post date:** [April 14, 2022, 3:56pm UTC](https://forum.wixstudio.com/t/blur-filter/4440/11 "2022-04-14T15:56:04Z")

</div>

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

```javascript
<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>

```

---

<div class="post-metadata">

**Author:** ![ayaanmali-2004](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ayaanmali-2004/32/33070_2.png) [@ayaanmali-2004](https://forum.wixstudio.com/u/ayaanmali-2004)\
**Post date:** [April 17, 2022, 12:03pm UTC](https://forum.wixstudio.com/t/blur-filter/4440/12 "2022-04-17T12:03:26Z")

</div>

God bless you

---

<div class="post-metadata">

**Author:** ![platd024-302](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/platd024-302/32/35814_2.png) [@platd024-302](https://forum.wixstudio.com/u/platd024-302)\
**Post date:** [December 7, 2022, 9:25am UTC](https://forum.wixstudio.com/t/blur-filter/4440/13 "2022-12-07T09:25:51Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![amandam](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/amandam/32/79539_2.png) [@amandam](https://forum.wixstudio.com/u/amandam)\
**Post date:** [December 7, 2022, 2:00pm UTC](https://forum.wixstudio.com/t/blur-filter/4440/14 "2022-12-07T14:00:56Z")

</div>

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.