This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Ash Adamson
Posted Mar 25 - Read on Facebook

Hey community! Have a shadow problem and not sure if it's framer bugging or I'm not using the right code. See the photo?

I'm adding a shadow to an oval that I imported from sketch.

If I add a shadow to the oval, there appears a shadow in a box shape around the oval. Very confusing, when I know the layer is an oval.

If I remove shadow, and make the layer draggable the oval looks and visually acts like AND oval doesn't have square edges.

Here's the shadow code I'm using: mm.Courage.shadowColor = "rgba(0,0,0,0.2)"

4 Comments

Joey Lamelas

Try making it a subLayer of another layer with the borderRadius set to "50%" and the clip set to true. And also set the subLayer's force2d to true.

Mike Feldstein

The layer is actually a square image, that happens to have a transparent background with a round shape inside of it. Browsers render shadows as if the entire image is opaque, hence the shadow around its border. If you want to have a shadow that actually respects the alpha values, use a css filter:

Example: http://share.framerjs.com/85x1f7iwj6r5/
Explanation: http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison

Ash Adamson

Mike, thanks I read the article and it makes sense. Are you implying that I add the CSS filter to the html file instead of applying the shadow in Framer?

Bert Timmermans

Ben Oprstu Adamson or a quick fix can be that you add a border-radius because you are working with circles.

Read the entire post on Facebook