Q:

How to add blur effect on top and right side of div?

I have this fiddle:
https://jsfiddle.net/aod4rmx8/
.background{
    position: absolute;
    left: 0;
    width:50%;
    right: 0;
    bottom: 0;
    top:0;
    background-color: #000;
    /*box-shadow: 100px 0 40px 6px rgba(0, 0, 0, 1);*/

-webkit-box-shadow: 200px 1px 300px 200px rgba(0,0,0,0.75);
-moz-box-shadow: 200px 1px 300px 200px rgba(0,0,0,0.75);
box-shadow: 200px 1px 300px 200px rgba(0,0,0,0.75);
}

What i want to achive is to add blur efect on top and right side of black background. This is what i want to achive:

So that i have a littlebit shadow on image that is on right side, but also to have blur on edge of right and top side of div that have background color. Any suggestion?

A:

If i am not wrong, you were asking something like this to add blur effect,
.data_protection {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

