'How 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 get

javascripthtmlcsstailwind-csstailwind-in-js


Solution 1:[1]

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>

Solution 2:[2]

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>

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yaroslav Trach
Solution 2 Mohit Maroliya B17CS036

Related Questions