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.

• Previous CSS Tip
• Next CSS Tip