Why replicating box shadow properties from Figma don't match the designs?

Question

Very confused here, please help. Am trying to replicate a Figma design. This is the design screen:

These are the styles applied to that card:

This is the code I write in Tailwind and vanilla CSS:

  <div 
className='flex flex-col bg-custom-gray-tertiary rounded-[12px] min-w-[350px] max-w-[350px] gap-6 p-6'
 style={{boxShadow: `
           0 4px 4px rgba(0, 0, 0, 0.1), 
           0 12px 32px -12px rgba(0, 0, 0, 0.1), 
           0 6px 12px rgba(255, 255, 255, 0.04), 
           0 1px 1px rgba(255, 255, 255, 0.2)
        `,
       }}

But it is not replicating the design at all. In fact, the white shadow is in the wrong way, despite writing it the way Figma styles want it to be. I am having to reverse some of the values, but am not sure why.

This is what my UI looks like:

Answer 1

If you look at the icons next to each of the shadows:

You'll see that the top two () are slightly different to the bottom two (). The bottom two actually indicate an inner shadow, so you should use the inset keyword as part of those box-shadow definitions:

tailwind.config = {
  theme: {
    extend: {
      backgroundColor: {
        'custom-gray-tertiary': '#1c2232',
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.4.16"></script>

<div class="p-10 bg-[#111927]">

  <div
    class="flex flex-col bg-custom-gray-tertiary rounded-[12px] min-w-[350px] max-w-[350px] gap-6 p-6"
    style="box-shadow:
      0 4px 4px rgba(0, 0, 0, 0.1), 
      0 12px 32px -12px rgba(0, 0, 0, 0.1), 
      0 6px 12px rgba(255, 255, 255, 0.04) inset, 
      0 1px 1px rgba(255, 255, 255, 0.2) inset
    "
  >
    
    <div class="size-20"></div>
  </div>
</div>