I have a transparent button. I'd like to blur anything that is behind the button.I know of the double image tricks. But I just want the area that is through the transparent button to be blurred, and this button can move around depending on the responsive layout.

I haven't found a javascript routine, the search results are too muddied with simple blurring techniques. I have seen some fliters for svg objects that will blur, but I don't know if they will blur elements underneath the svg.

Bill,

Are you trying to 'hide' something that will be behind the button?

Or, do you just want the blur effect as the button background so you can 'kind of see' what's behind?

If you have PhotoShop you might be able to do that to your button.

Or am I reading your question the wrong way?

Bill,

Go check this out and see if it's what you wanted or at least be a work around: https://codepen.io/ariona/pen/geFIK

That may not be what you wanted as that does use two images. Sorry for the ring.

Thanks. I am hopinng for a way to not have to use two images. I don't think that would be good for mobile. Otherwise, just change how how the element will look on mobile screens without a 2nd image.

Haven't tried, but would it be an idea to make a button with something like a radial gradient where the outer part is nearly transparent?

Like Inger stated. Make your button have an outer edge that has the blurring surround.