Box Shadow From Figma to Webflow

This is a situation where you’ll want to take advantage of the CSS Preview to make sure the styles match what’s shown in Figma–just select the element you want to add the shadow to and open the preview to see your changes as they would appear in the project CSS:

If the box-shadow in Figma has the same X and Y value, then you’d just need to use the rotate buttons (the circular arrows) to choose one of the four corner angles based on the direction of the shadow and set the appropriate distance. If the X and Y values are different, then you’d need to fiddle with the angle to match the corresponding values.

I’d imagine using an angle instead of two separate values is more user friendly but thankfully the CSS Preview will give you enough information on the generated styles to match Figma :+1:

1 Like