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)"
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.
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
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?
Ben Oprstu Adamson or a quick fix can be that you add a border-radius because you are working with circles.