Infinite shadow for your images
Add an infinite shadow to your image in any direction using a few lines of code
- No extra element (only the
<img>
tag) - No pseudo-elements
- Only 2 CSS properties
- Works with rounded corners
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.