Shadows not shown with transparent fill

I have ghost buttons (i.e. with a transparent surface), I would like to apply a box-shadow to simulate focus-tab but nothing is shown, the only way is to assign a coloured fill.
I understand that I’m basically removing opacity from the fill so applying a shadow to it is almost not logical, but this is feasible in css.

I wonder is there some trick or other to way to solve this?

1 Like

A trick would be apply a fill with 0.01% transparency.
Drop shadows need either a fill or stroke that is opaque to get shown.
For some unknown reason, the trick does not work for strokes.

Thank you!
yes so this will works, but I have to detach the variable and then the developers will ask me about this change

You could create and use a different variable and inform your dev to ignore it because you needed to use it for a workaround.

yes I wouldn’t want to create a variable just for this issue, but thank you I appreciate your suggestions :pray:, I hope they can fix it, I have few more components that do not need a fill but need a box-shadows

No problem you’re welcome.
I’m wondering, if the components do not need a fill, why is a fill variable or style necessary in the first place though?

To simply tackle future changes, IMO is always better have it something set at components level

I ran into this problem myself. This is just a bug and it ought to get fixed.