Is it possible to bend a linear gradient CSS?

Question

I am trying to create this "swoosh" through the image with CSS.

https://i.sstatic.net/1JHvD.jpg (without gradient) I have tried doing this with a radial gradient, however, I can't get the gradient to "shut off" abruptly, as the gradient approaches the center. Would the best approach to this be to somehow bend a liner gradient?

This is what I have so far, I don't want the blue to be in the corner, I just want a "slice" of the gradient running down the image. https://jsfiddle.net/uh882Lcw/

HTML

<div class="banner-image">
  <div class="glint">

  </div>
</div>

CSS

.glint {
    background: radial-gradient(ellipse at center, rgba(0, 0, 255, 0.4) 0%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
    position: absolute;
    top: -700px;
    left: 250px;
    width: 1300px;
    height: 1060px;
    border-radius: 100%;
}

.banner-image {
    overflow: hidden;
    background-image: url('http://via.placeholder.com/960x361');
    width: 960px;
    height: 361px;
    position: relative;
    }

Answer 1

You can use a radial gradient on top of a background image.

.bg-img {
  width: 620px;
  height: 200px;
  background: radial-gradient(ellipse 800% 500% at 425% -25%, transparent 50%, rgba(0, 0, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%), url(http://lorempixel.com/620/200/animals);
}

<div class="bg-img"></div>