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%; /* works with any value or without */
  outline: var(--s) solid var(--c);
  --_c: conic-gradient(var(--c) 0 0);
}
.top {
  border-image: var(--_c) 1 0 0 0/50% 0/100vh var(--s);
}
.bottom {
  border-image: var(--_c) 0 0 1 0/50% 0/100vh var(--s);
}
.right {
  border-image: var(--_c) 0 1 0 0/0 50%/var(--s) 100vw;
}
.left {
  border-image: var(--_c) 0 0 0 1/0 50%/var(--s) 100vw;
}

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

Related: smashingmagazine.com/2024/01/css-border-image-property/

More CSS Tips