blur (css) not working for background image

Not reproducible Issue #9697787


Andrei V.
Nov 7, 2016
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

[ using Microsoft Edge 38.14393.0.0 - Microsoft EdgeHTML 14.14393 ]

I’m trying to set a blur to a background-image and it is not working.

.card_login_bg {
width: 200px;
height: 208px;
top: 0;
margin: 0 0 0 -40px;
background-position: center center;
background-size: cover;
position: absolute;
z-index: -1;
opacity: .3;
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
overflow: hidden;


1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Status to “Confirmed”

    Changed Status from “Confirmed” to “Not reproducible”

  • Thank you for the report. I took a look and based on a bit simplified rep](https://jsfiddle.[]( can’t notice any difference between Edge, Chrome and Firefox on the development build of Edge, so even if we had a bug in this area - this doesn’t repro anymore.

  • It’s weird, because your test in my browsers are looking still wrong, look:

  • I’ve also found this - it’s caused by the z-index being below 0. For some reason this disables blurring. Doesn’t happen on any other browser.

    Bogdan - Your repo doesn’t have the z-index specified.

  • I am observing the same issue on Edge 38. Is there a workaround to this?

You need to sign in to your Microsoft account to add a comment.

Sign in