Can CSS Linear Gradient Bend?
I am trying to create this "swoosh" through an image using CSS.
http://imgur.com/a/wOyvk (no gradient) I tried to do it with a radial gradient, however I can't get the gradient to "switch off" suddenly as the gradient is getting closer to the center. Would there be a better approach to this - bending the gradient of the liner somehow?
This is what I have so far, I don't want the blue in the corner, I just want a "slice" of the gradient going 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;
}
source to share
You can use a radial gradient over the 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>
source to share
If I understand you correctly, you just want this center to become a little more transparent. You can adjust percentages and transparencies to get the effect you want.
.glint {
background: radial-gradient(
transparent 10%,
rgba(255, 255, 255, .1) 80%);
pointer-events: none;
z-index: 1;
position: absolute;
top: -700px;
left: 200px;
width: 1300px;
height: 1060px;
border-radius: 100%;
}
.banner-image {
overflow: hidden;
background: url('http://i.imgur.com/OFFk8obg.png') no-repeat;
background-size: cover;
width: 700px;
height: 361px;
position: relative;
}
<div class="banner-image">
<div class="glint"></div>
</div>
source to share
One more attempt
I use the border radius to constrain the part affected by the gradient; I needed a div larger than the container to achieve the correct shape
.test {
height: 400px;
width: 1090px;
border: solid 1px green;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
width: 96%;
height: 177%;
right: -10%;
bottom: 0px;
position: absolute;
border-bottom-left-radius: 1374px 876px;
background-image: linear-gradient(to right, rgba(255,255,255,0.4), rgba(0,0,0,0.3));
}
<div class="test"></div>
source to share