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.
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>