How make border of the image blurry and no so flat? CSS-CodePudding

I have an image on the website, background of the image is gradient, so right and bottom sides of the picture looks flat and I want to make it blurry and not so flat, so it wouldn't look like image. How can I do that with CSS?

CodePudding user response：

img {
        width: 300px;
         -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.0));
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.0));
    }

<img src="https://images.unsplash.com/photo-1657664049378-c8aadfe323f1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=700&q=60"
        alt="">