如何更改依赖于其他组件的CSS属性

I'm trying to do some website with react library. But to finalize that nicely I don't know how to change CSS properties wchich depends from other. For example I don't want this blur filter in my text area .mirror-container what is used in background .home-header

这是代码：

.home-header {
    height: 55vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    position: absolute;
    z-index: -1;
    background: url("./assets/images/bg.jpeg") ;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(3px);
    background-position-y: 80%;
}
.mirror-container {
    width: 50rem;
    height: 85%;
    box-shadow: 0 5px 25px rgba(0,0,0, .5);
    color: #000;
    margin-top: 8rem;
    border-top: 1px solid white;
    border-right: 1px solid white;  // HERE NEED TO BE WITHOUT BLUR 
}

我也想问一下如何在图片的末尾添加阴影。我的意思是这样可以使背景平滑变化。或者，也许我应该导入一个阴影波png并将其插入到图像下方？最好的解决方案是什么？

问候。