Transparency doesn't work well with object with drop shadow


#1

Hi,
I’m designing a white panel that needs to be slightly transparent but when I apply a drop shadow, the shadow darkens inside the white panel. The expected result would be the shadow only affects the exterior.
Am I doing something wrong?


#2

You are not doing anything wrong I had the same problem. You could have 2 rectangles, the one on the top is white and transparent, the one on the bottom also has a white fill but this one has the drop shadow and the entire rectangle has a transparency set on it.example


#3

Yep, I think it could be realistic but in interface design that is not what we expect, me, at least.
We can think about Photoshop and Illustrator, have this for decades and it became part of my mental model, the same applies with the align tool.


#4

true, I used photoshop and illustrator all my life but in the end it’s just a new tool we need to learn. Now that i’m using Sketch and Invision I use Axure much less now. Always something to learn which drives me coo coo but keeps my mind fresh. In Sketch you can do realistic shadows like in CSS only using the outside drop shadow and not effecting the inside fill.


#5

Yes, that’s me too :slight_smile:
I’m using a lot Sketch and Invision, they’re my daily tools but I really like Axure for more complex interactions. This latest version improved a lot the integration with Sketch (via plugin).
Learning new tools it’s good to keep our brain fit!


#6

True I need to get back to Axure and see what version 9 offers but looks a little buggy. Axure is still a good tool but they need to up the game and start to compete with other tools like framer. I need to look into this tool https://www.framer.com/ but I’m still mastering Sketch/Invision and want to do a project in Invision Studio.