Skip to main content
CSS Tip

Infinite shadow for your images

Add an infinite shadow to your image in any direction using a few lines of code

four images with an infinite shadow

img {
--c: #A7DBD8;
--s: 10px; /* the border thickness*/

border-radius: 50%; /* optional */
outline: var(--s) solid var(--c)
}
.top {
border-image:
linear-gradient(var(--c) 50%,#0000 0)
fill 0//100vh var(--s);
}
.bottom {
border-image:
linear-gradient(#0000 50%,var(--c) 0)
fill 0//100vh var(--s);
}
.right {
border-image:
linear-gradient(90deg,#0000 50%,var(--c) 0)
fill 0//var(--s) 100vw;
}
.left {
border-image:
linear-gradient(90deg,var(--c) 50%,#0000 0)
fill 0//var(--s) 100vw;
}

See the Pen Infinite image shadow by Temani Afif (@t_afif) on CodePen.