css Question posted in
Some basic documentation can be found here.

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

The div I need to develop is this:
enter image description here

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?

Tags:

2

Answers


  1. 0

    There’s some grammar fault in your code, and I think black layer needs add some transparency, to show white layer.

    Try [background-image:linear-gradient(to_bottom,_#062142aa_25%,_#212639aa_100%),_linear-gradient(to_bottom,_#ffffff_0%,_#ffffff_24%,_#212639_100%)]

    Here’s the effect drawing

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search