[SOLVED] Why 2 linear gradients on 1 div are not being applied (Tailwind CSS)

Why 2 linear gradients on 1 div are not being applied (Tailwind CSS)

The div I need to develop is this:

The code I wrote for that is:

  <div
    className='[background-image:linear-gradient(to_bottom,#212639_100%,#062142_25%),linear-gradient(to_bottom,#ffffff_24%,#ffffff_0%)]
    flex justify-center items-center rounded-[16px] max-w-16 max-h-16 min-w-16 min-h-16 bg-gray-700 shadow-card-a'
  >
    <Image src={DeltaTestLogoIcon} alt='logo of delta test icon' />
  </div>

This was inspired from exmaxx's comment here at: How to use tailwind gradient utilities with multiple gradients?

I am following the exact same specifications as in Figma but am unable to replicate the same design. Can anyone please help?

Solution

Several things:

You can use a bg-[] arbitrary value class instead of a full arbitrary property class.
You seem to have misinterpreted the percentage display in Figma. They should not be gradient color stop locations but rather the color stops' alpha channels.
The order of the declared gradients is wrong in the CSS.

Here it is with all those points fixed:

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

<div
  class='bg-[linear-gradient(to_bottom,rgb(255_255_255/.24),rgb(255_255_255/0)),linear-gradient(to_bottom,rgb(33_38_57/1),rgb(6_33_66/.25))]
  flex justify-center items-center rounded-[16px] max-w-16 max-h-16 min-w-16 min-h-16 bg-gray-700 shadow-card-a'
>
  <img src='https://picsum.photos/32' alt='logo of delta test icon' />
</div>