css - Too much linear gradient text style being applied, despite it being same as Figma design style - Stack Overflow

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:

The style I end up getting is this:

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

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:

The style I end up getting is this:

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

• css
• user-interface
• tailwind-css
• linear-gradients

Share Improve this question Follow asked Jan 11 at 12:55 Abdullah AhmadAbdullah Ahmad 12977 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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>