How to make a background gradient

I need help with a webpage I'm webmastering. Here's some code:

<body>
<div class="left">
</div>

And here's the css for it:

.left {
    position: fixed;
    width:50%;
    height: 100vh;
    top:0;
    background-image: url('../img/plakatm.jpg');
    background-size: 1164px,1000px;
    background-position: center;
    background-repeat: no-repeat;
}

The problem is, that i need to make a gradient at the right edge of it. I can't add the gradient to the image, beacause the .left element changes size on smaller monitors and the gradient would not show up. Here you can see the full site (It's in polish but you don't need to understand it) Click here to see it. Thanks.
Adam