问题原因 #

你当前的代码使用了完全透明的终止色（#A3A3A300），且渐变默认覆盖整个文字元素高度，导致文字底部完全透明，褪色程度远超Figma设计效果。而Figma中的渐变仅让文字上部到中部产生淡入淡出，底部保留了一定不透明度。

解决方案 #

通过两个关键调整匹配设计：

1. 将完全透明的终止色替换为半透明白色，避免文字底部完全消失；
2. 限制渐变覆盖范围，不让渐变贯穿整个文字高度。

修改后的代码示例 #

方式1：通过渐变位置控制范围

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

方式2：通过背景长度限制渐变高度

<p className='font-inter-tight font-medium text-[18px] leading-[27px] tracking-[0.03em] bg-gradient-to-b from-white to-white/30 bg-clip-text text-transparent bg-[length:100%_85%]'>
     {resource.title}
</p>

微调建议 #

• 根据Figma设计的渐变参数，调整to-[85%]或bg-[length:100%_85%]中的百分比，控制渐变覆盖的文字高度；
• 调整to-white/30中的透明度数值（比如/40、/20），匹配设计中底部的褪色程度；
• 如果设计中的渐变起始/终止色不是纯白，可替换from-white和to-white/xx为对应颜色，比如from-[#F5F5F5]。

内容的提问来源于stack exchange，提问作者Abdullah Ahmad