using linear gradient background on text css

If you want to have a background gradient on your foreground text you can use this css. 

I think currently this only works on webkit enabled browsers, but it looks pretty cool.

HTML

<h2 class='gradient-text'>Treasure every moment that you have and treasure it more because you shared it with someone special</h2>
<h2 class='gradient-text-pink-blue'>qualitative and quantitative difference between a day</h2>

CSS

.gradient-text {
  background: -webkit-linear-gradient(45deg, #444, #F00 );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-text-pink-blue {
  background: -webkit-linear-gradient(45deg, pink, blue );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Treasure every moment that you have and treasure it more because you shared it with someone special

qualitative and quantitative difference between a day

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 502 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
Most people can do absolutely awe-inspiring things,” he said. “Sometimes they just need a little nudge.
Unknown