Alguém sabe como deixar essa imagem de background com uma transparência e um gradiente?

Estou criando um projeto pra treinar com react e gostaria de deixar a imagem de fundo da tela como está no figma que foi feito.

Está assim:

Estou pegando os dados da api que nele vem a imagem e gostaria de passar ele como a imagem de background. Mas já tentei de varias formas consigo colocar a imagem no fundo mas não consegui fazer esse gradiente. Vou deixar o código a baixo para alguém olhar.

export const Avaliation = () => {

    const { id, type } = useParams<{ id: string, type: string }>();

    const avaliation = useGetAvaliation(Number(id), type as 'movies' | 'series');
    const apiImageUrl = import.meta.env.VITE_API_IMAGE;
    const apiPosterUrl = import.meta.env.VITE_API_IMAGE_BACKDROP;
    const voteAverage = Number(avaliation.data?.vote_average) * 10;
    console.log(avaliation.data);

    return (
        <div style={}>
            <div className='container-avaliation'>
                <div className='container-poster'>
                    <img src={`${apiImageUrl}${avaliation.data?.poster_path}`} alt={avaliation.data?.title} />
                </div>
                <div className='container-description'>
                    <div className='container-desc'>
                        <div className='container-title'>
                            <h1>{avaliation.data?.title || avaliation.data?.name}</h1>
                        </div>
                        <div className='container-actions'>
                            <div style={{ width: 60, height: 60 }}>
                                <CircularProgressbar value={voteAverage} text={`${voteAverage.toFixed(2)} %`} styles={buildStyles({ pathColor: '#21D07A', textColor: '#fff', })} className='bold-text' />
                            </div>
                            <img src={Listar} alt="Icone de ação de listar" />
                            <img src={Favorito} alt="Icone de ação dos favoritos" />
                            <img src={Curtir} alt="Icone de ação de curtir" />
                        </div>
                    </div>
                    <div className='container-sinopse'>
                        <h2>Sinopse</h2>
                        <p>{avaliation.data?.overview}</p>
                    </div>
                </div>
            </div>
        </div>
    );
}

.container-avaliation {
    display: flex;
    gap: 70px;
    margin-left: 80px;
}

.container-poster {
    margin: 10px;
}

.container-poster img{
    width: 346px;
    height: 508px;
    object-fit: cover;
}

.container-description {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.container-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
}

.container-title h1{
    color: #fff;
    font-weight: 400;
    font-size: 49px;
}

.container-actions {
    display: flex;
    gap: 18px;
}

.container-sinopse {
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.container-sinopse h2{
    color: #fff;
    font-size: 30px;
    font-weight: 400;
}

.container-sinopse p{
    color: #fff;
    font-size: 25px;
    font-weight: 400;
}

.bold-text {
  font-weight: 900;
}