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:

h1 span.gradient{
font-weight: normal;
display: inline-block;
background: linear-gradient(45deg, #f85700 0%, #446ecc 99%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

WordPress Web Designer and founder of JMJ Web Design.