<div class="container">
<div class="wrapper">
<img src="https://www.dangeloweb.it/wp-content/uploads/2020/07/gradiente-radiale-effetto-vignetta.jpg">
</div>
<div class="wrapper">
<div class="vignetta"></div>
<img src="https://www.dangeloweb.it/wp-content/uploads/2020/07/gradiente-radiale-effetto-vignetta.jpg">
</div>
</div>
.container {
display:flex;
}
.wrapper {
position:relative;
}
.vignetta {
position:absolute;
top:0;
left:0;
width:340px;
height:100%;
background-image:
radial-gradient(
ellipse,
rgba(0,0,0,0) 30%,
rgba(0,0,0,1)
);
}
img {
width:340px;
display:block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.