How to darken image and set a gradient to the image withount darken effect?

Question

I need to set an image as a background. Then it needs to be darkened. A gradient needs to be set from bottom - white - to top - transparent. The problem is: When I darken the image - the gradient is darkened as well, which I don't want. I've tried to make on overlay by adding another block but it doesn't work. Here is the code:

.bg {
    background: url('../../public/images/Hero.png') no-repeat;
    background-size: contain;
    z-index: -1;
    position: relative;
    height: 700px;
    width: 100%;
    filter: brightness(90%);
    &::before {
        content: '';
        display: block;
        position: absolute;
        background-image: linear-gradient(0deg,  rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%);
        height: 100%;
        width: 100%
    }
}

Answer 1

Add a new block inside of .bg block, set its styles to:

.bg-fade {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.1);
}

and remove filter property