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
Page Views

This page has been viewed 73 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
There is a qualitative and quantitative difference between a day that begins with a little exercise, a book, meditation, a good meal, a thoughtful walk, and the start of a day that begins with a smartphone in bed.
Unknown