CSS Tip

Infinite stripes shadow for your images

Another variation of the previous effect with infinite stripes

CSS infinite stripes shadow

img {
  --b: 8px; /* the border thickness*/
  --w: 216px; /* image width */
  --c: #A7DBD8;
  
  
  --_w: calc(0.1464*var(--w));
  width: var(--w);
  border-radius: 50%; /* don't touch this, only rounded images */
  padding: var(--b);
  box-shadow: 0 0 0 var(--b) inset var(--c);
  border-image:
    repeating-radial-gradient( 
      at calc(100% - var(--w)/2 + var(--_w)) calc(100% - var(--w)/2 + var(--_w)),
      var(--c) 0,#0000 1px var(--b),var(--c) calc(var(--b) + 1px) calc(var(--b)*2)
    ) 9999 0 0 9999/
    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 stripes shadow by Temani Afif (@t_afif) on CodePen.

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

More CSS Tips