Dropshadow in prototype mode being covered by a white background

Hi guys,

I am trying to create a prototype of a button hovering effect for my buttons. When hovering over the button, it will cast a drop shadow, but I see a white background around my pill shape button when I enter prototype mode, which covers parts of the drop shadows.

In my design, I have double checked there is no background color for the frame that contains the button.

Any ideas?


I’ve had the same issue all week but finally figured it out this morning.

In your Drop shadow settings panel for the button, click the the ‘Show Behind Transparent Areas’ checkbox at the bottom - that sorted it for me :+1:

Hi @Rob17

I had the Drop Shadow settings panel opened, but I cannot find that checkbox you mentioned. Is there something I am missing?

Hi @Haoyang_Guan,

Hmmm. Did you create a component (or variant of the button component) before adding the drop shadow? That’s the only thing I can think of sorry.

For example: If I create a pill shape and add a drop shadow, it doesn’t give the checkbox option.

But, if I create a pill shape, make it a component (or create a variant of the original default button) then add the drop shadow last, the checkbox option is there to ‘show behind transparent areas’.

I hope that makes sense and helps!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.