CSS text gradients

Want to add gradients to your headers?

A neat CSS trick which is widely supported on all modern browsers is applying gradients to live text. This can easily be achieved using a background gradient and CSS3 background properties -webkit-background-clip and -webkit-text-fill-color.

Simply create your title and wrap the content with a span and add a class name of your choice. Apply the following CSS:

h2 span.gradient{
font-weight: normal;
display: inline-block;
background: linear-gradient(45deg, #f15d22 0%, #4a2a63 99%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}