0
461
ViewsHow to add liner gradient to the text in tailwind css?
How to add a linear gradient to the text/heading in the Tailwind CSS ? Although I was able to add this to the background using this
<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>
But I am getting this
·
Juan Pablo Isaza
2 answers
Answer question0
Add
-webkit-background-clip: text; /* apply background clip */
-webkit-text-fill-color: transparent;
to make your text clip gradient
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>
·
Juan Pablo Isaza
Report
0
I had figured out a way after an hour's hustle.
<h2 className="text-4xl w-full text-transparent bg-clip-text font-extrabold bg-gradient-to-r from-white to-sky-500/10 p-2">
Welcome To <br /> My Personal PortFolio
</h2>
·
Juan Pablo Isaza
Report
Answer question