<div class="gradient-border">
<figure>
<img src="https://i.imgur.com/jFKonXQ.jpeg" alt="White and Red Chevrolet">
</figure>
</div>
figure {
margin: 0;
padding: 10px;
}
img {
width: 100%;
display: block;
}
.gradient-border {
width: 50%;
position: relative;
margin: 0 auto;
}
.gradient-border::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(#1a1a1a, #1560bd);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.