cssuser-interfacetailwind-csslinear-gradients

Too much linear gradient text style being applied, despite it being same as Figma design style

I am trying to replicate a design in Figma for text with linear gradient. Here is my code, which I got from an article somewhere:

<p className='font-inter-tight font-medium text-[18px] leading-[27px] tracking-[0.03em] bg-gradient-to-b from-[#FFFFFF] to-[#A3A3A300] bg-clip-text text-transparent'>
     {resource.title}
</p>

The style I'm aiming to achieve is this:

enter image description here

The style I end up getting is this:

enter image description here

Not sure why the fading at the bottom is much more than what it is in the Figma design. Can anyone please guide?

Solution

  • It seems like the 0% alpha channel of the #A3A3A3 color stop is not applied in the Figma visual. Setting the color to opaque seems to align more closely with the Figma design.

    tailwind.config = {
  theme: {
    extend: {
      fontFamily: {
        'inter-tight': ["Inter Tight", ...tailwind.defaultTheme.fontFamily.sans],
      },
    },
  },
};
    @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500&display=swap');

body {
  background-color: #1c2232;
}
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>

<p class="font-inter-tight font-medium text-[18px] leading-[27px] tracking-[0.03em] bg-gradient-to-b from-[#FFFFFF] to-[#A3A3A300] bg-clip-text text-transparent">
  Lorem Ipsum Dolor Sit Amet,<br/>
  Consectetur Adipiscing  
</p>

<p class="font-inter-tight font-medium text-[18px] leading-[27px] tracking-[0.03em] bg-gradient-to-b from-[#FFFFFF] to-[#A3A3A3] bg-clip-text text-transparent">
  Lorem Ipsum Dolor Sit Amet,<br/>
  Consectetur Adipiscing
</p>