如何为 Tailwind CSS 中的文本/标题添加线性渐变?虽然我能够使用这个将它添加到背景中
<h2 className="text-4xl w-full text-white font-extrabold bg-gradient-to-r from-sky-500/20 to-sky-500/75">
Welcome To <br /> My Personal PortFolio
</h2>
如何为 Tailwind CSS 中的文本/标题添加线性渐变?虽然我能够使用这个将它添加到背景中
<h2 className="text-4xl w-full text-white font-extrabold bg-gradient-to-r from-sky-500/20 to-sky-500/75">
Welcome To <br /> My Personal PortFolio
</h2>
添加
-webkit-background-clip: text; /* apply background clip */
-webkit-text-fill-color: transparent;
使您的文本剪辑渐变
h2 {
font-size: 48px;
font-weight: 800;
margin: 0;
}
h2.gradient-text {
background: -webkit-linear-gradient(45deg, #09009f, #00ff95 80%);
-webkit-background-clip: text; /* apply background clip */
-webkit-text-fill-color: transparent;
}
<h2 class="gradient-text text-4xl w-full text-white font-extrabold bg-gradient-to-r from-sky-500/20 to-sky-500/75">
Welcome To <br /> My Personal PortFolio
</h2>