Skip to main content

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?

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 🙏, 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.


Reply