Drop shadows appear in design but missing in prototype view

Inherited drop shadows show in the design file but don’t properly appear in prototypes. You can see in the image of the design the avatar and campfire image both show the drop shadow, but in the prototype the drop shadow is missing on both.

Design:

Prototype:

An effect style is enabled on the container component that both the avatar and image inherit. When I apply the effect directly to the component’s sub-elements they appear in the prototype, but that defeats the purpose of applying the effect style to the container component to avoid having to micromanage each individual element inside.

Hello @gj-jay

Could you share us the layer view of your project? It looks like the parent with the shadows property is a frame and that probleme could be resolve by changing the frame to a group

TL;DR transparent frame blocks children shadows beneath it whilst group doesn’t

When using a frame as a parent to pass shadow to its children, the children’s shadow will render but will be masked by the frame surface unless the frame meet on of the following criteria:

  • Only fills with less than 100% opacity
  • A stroke, but no fill
  • A fill or stroke with a blend mode that isn’t Normal
  • A center or outside stroke with less than 100% opacity

Howerver there is no such criteria when using a group instead of a frame.

Hi Haroll,

Here’s a picture of the component structure - you can see the shadow is applied to the main component, which has no fill background.

Is there any reason why frames (or more specifically a component in this case) have different behavior than groups? I’d like to keep things as a frame so constraints behave properly as this component is used in multiple different screen sizes.

Hello @gj-jay

I’m sorry it seems that I accidently I cut off a part of my previous message. There is an option in the box shadow window that allow you to trick the system

By checking Show behind transparents areas checkbox your prototype should match your design

On the “why frame behave differently than group” question, I’m afraid I too do not have an awser :frowning:

Let me know if it helps

No worries, appreciate it! I tried toggling ‘Show behind transparent areas’ off and on and reloading the prototypes affected - unfortunately it doesn’t fix the issue in my prototypes but thank you for the suggestion.

i think it happens when you use backgroud blur effect i have the same problem and when i removed background blur it worked but how to fix backgroud blur not showing in prototype
?

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