CSS Tip

Infinite shadow for your images II

Another variation of the previous effect where you can add a diagonal infinite shadow to your rounded image.

four images with a diagonal infinite shadow

img {
  --b: 8px; /* the border thickness*/
  --w: 200px; /* image width */
  --c: #A7DBD8;
  
  --_w: calc(0.1464*var(--w)); /* 0.1464 = (sqrt(2) - 1)/(2*sqrt(2)) */
  width: var(--w);
  border-radius: 50%; /* don't touch this, only rounded images */
  padding: var(--b);
  box-sizing: border-box;
  box-shadow: 0 0 0 var(--b) inset var(--c);
  border-image: conic-gradient(var(--c) 0 0) 1 0 0 1/
    calc(100% - var(--_w)) var(--_w) var(--_w) calc(100% - var(--_w))/
    999px 0 0 999px;
  clip-path: polygon(
    120.71% 50%,calc(120.71% - 999px) calc(50% - 999px),
    calc(50% - 999px) calc(120.71% - 999px),50% 120.71%);
}

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

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

More CSS Tips