Css 如何在div的顶部和右侧添加模糊效果？

我有把小提琴：

我想要实现的是在黑色背景的顶部和右侧添加模糊效果。这就是我想要实现的目标：

---

所以我在右边的图像上有一个小阴影，但在右边的边缘和有背景色的div顶部也有模糊。有什么建议吗？

如果我没说错的话，你是在要求这样的东西来增加模糊效果

.data_protection {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

。数据保护{
浮动：左；
宽度：100%；
填充：10px 0px；
填充底部：30px；
位置：相对位置；
背景图片：url(https://ec.europa.eu/clima/policies/ets/ets-summer-university/sites/clima-ets-summer-university/files/sign%20up%20photo%20-%20.JPG),；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
最小高度：400px；
}
.背景{
填充：50px；
位置：绝对位置；
左：0；
宽度：40%；
右：0；
底部：-10px；
排名：0；
-webkit过滤器：模糊（5px）；
-moz过滤器：模糊（5px）；
-o-滤波器：模糊（5px）；
-ms过滤器：模糊（5px）；
过滤器：模糊（5px）；
转换：translate3d（0px，-5px，10px）；
边框：实心1px#000；
左侧填充：1200px；
框大小：边框框；
盒影：插图-900px 0 0px 10px#000；
}

抱歉，误读了您的问题，将我的建议改为：div的边缘仍然不模糊…其粗糙度几乎可以根据您的需要进行调整？如果您可以使用其他颜色更新示例图像，以便我们了解您的意思，因为现在很难理解您的意思

框阴影：200px 1px 300px 200px rgba（0,0,0.75）插图我可以使用filer:blur，但如何在右侧的图像上添加阴影，例如在我的小提琴中？从左到右。。。
.data_protection {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}