11 replies

A "continuous" box shadow on an element

I'm creating a pill shaped button from a design that has a box shadow like effect, however two key features of the shadow complicate matters, the shadow must visually connect to the element in a straight line, and the drop shadow also has a repeating background of it's own.

The first attached image shows the design, and the second shows where I'm up to with the implementation.

My current approach is simply creating an

inset: 0

inset: 0

element underneath the pill button, applying the appropriate border, and applying a

repeating-linear-gradient

repeating-linear-gradient

to achieve the striped background effect. I've no doubt this is an issue that has been solved before, but I've struggled to find the answer.

Here's a pen to play with: https://codepen.io/mister_simon/pen/KKLOJwR
It's not the neatest... But it's a working prototype so yeah lol.