Skip to main content
Solved

How to prevent drop shadows from showing through semi-transparent objects?


Priscilla

In Sketch, you can create semi-transparent objects, and add drop-shadow to them, no problem. However, adding a drop shadow to a semi-opaque layer in Figma makes it look awful, because the drop shadow shows through, as in the screenshot here:

I found a temporary hack by creating 2 layers: a semi-transparent layer on top, and a fully opaque layer beneath, and superimposing them one on top of the other. The problem, however, is that this style is used throughout the design system, so will become problematic if we constantly have to resize 2 layers for the same object. Is there a way around this? I’ve googled and can’t find anything, except 1 person saying that there’s no way around this, but I refused to believe it, because it seems like such a basic thing. Please help!

Best answer by Phil_Larsen

To reduce the actions required, you could have them be in the same component and have both shapes set to Left & Right, Top & Bottom. That way resizing the parent frame will resize the contents accordingly.
image

View original

3 replies

Phil_Larsen
  • Active Member
  • 130 replies
  • Answer
  • May 19, 2021

To reduce the actions required, you could have them be in the same component and have both shapes set to Left & Right, Top & Bottom. That way resizing the parent frame will resize the contents accordingly.
image


Priscilla
  • Author
  • 1 reply
  • May 19, 2021

Brilliant! That seemed to work… thank you! 🙏


Phil_Larsen
  • Active Member
  • 130 replies
  • May 22, 2021

Glad I could help! 😃


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings