Button drop shadow

Design help General
1

Hello, heroes!
I wonder if there is any possibility to make the drop shadow looks like the one on figma? Does anybody has dealt with?

button1
button11338×802 53.5 KB

Thank you in advance.

2

CSS shadows are box shadows, so they:

  • can’t be seen through the element even if the element is transparent
  • can’t reflect the morphology of the element like in your example. They’ll always span from an edge to the opposite one.

image
image1081×332 5.63 KB

To achieve with Webflow what you did in figma, you can duplicate your element, lay the copy under it, and play with CSS Filter Blur and Opacity, then move it with Position.

http://vincent.polenordstudio.fr/snap/19cirfi.mp4

With a bit of custom code and the use of pseudo elements like ::after, you could compltely automate this, removing the need to manually duplicate an element and style it.

1 Like
3

Thank you a lot for a such detailed responce, Vincent!