Shadow in the browser (CSS) is not the same as in Figma

Ask the community
1

I have a shadow style in my design system. When the developer comes and takes the CSS code and implements the shadow, in the browser, it looks different. (both in Chrome and Safari)

After some playing around we realised that the shadow in the browser looks like it would be Clipped in Figma. We don’t know how to make the shadow not look “clipped” in the browser. Can somebody help? We’re using Tailwind CSS if that helps.

Attached an image for you to see how it looks. The right side is how the browser renders it

Here is the CSS:

box-shadow: 0px 2px 6px 0px rgba(89, 97, 104, 0.1);

box-shadow: 0px 1px 3px 0px rgba(89, 97, 104, 0.1);

box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.06);

Frame 10
Frame 104260×1540 135 KB

2

Every system has its own renderer. You should expect differences, sadly. Especially true for fonts.
Here, I would try to lower the shadow in term of intensity and position for the browser edition…
Good luck.

1 Like