Infinite stripes shadow for your images
Another variation of the previous effect with infinite stripes
- No extra element (only the image tag)
- No pseudo-elements
- Optimized with CSS variables
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%);
}
Related: smashingmagazine.com/2024/01/css-border-image-property/
More CSS Tips
- Place your image inside a 3D gift box II a cool 3D effect to create a image gift box.
- Place your image inside a 3D gift box a cool 3D effect to create a image gift box.
- Overlay reveal animation for your images a fancy reveal animation using only one element.
- A Ribbon shape with a reveal hover effect A CSS-only ribbon shape with a fancy reveal effect on hover.