How To Add Text Gradients With CSS

In this tutorial we are going to look at some of the new CSS3 features for dealing with text colours. If you have used CSS background gradients before then you will know how you can add gradients to the background of elements, but it's not as easy to change the colour of text to have a gradient just by using CSS. Before we continue it's worth noting that this technique will only work with Webkit Browsers (Chrome and Safari). To achieve this we are going to use the following CSS properties.

• -webkit-gradient
• -webkit-background-clip
• -webkit-text-fill-color

#CSS Colour Gradient

CSS allows you to create a background colour gradient on any element. Allowing the background colour to change colour from beginning of the element to the end. Using CSS to do this task rather than images will mean less images on the page and will decrease page load times. To create a background with gradient you will need the following CSS. The first colour value is the starting colour and the second colour is what the gradient will fade into.

.gradient{
background-color:#FFF;

/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#FFFFFF, #000000);

/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#000000));

/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#FFFFFF, #000000);

/* Opera 11.10+ */
background-image: -o-linear-gradient(#FFFFFF, #000000);

/* Microsoft IE10 */
background-image: -ms-linear-gradient(#FFFFFF, #000000);
}

#CSS Background Clip

Normally the colour gradient option is only available to be used on the background colour, but we need to use it on the text colour. To make the colour gradient be on the text we need to use the CSS property background-clip. The * background-clip property* defines if the background extends into the border of the element or not. The default to this property is border-box which means that the background does extend into the border of the element. To make the background not extend into the border you need to use the value padding-box.

background-clip: [value];

Background-clip values: - border-box - Background extends into the border.

• padding-box - Background does not extend into the border.
• content-box - Background only extends in the content area.

None of these values are what we need to use to make the text gradient, this is because the value we need to use is only supported by Webkit browsers (Chrome and Safari). With the webkit browsers we can use an extra value of text.

-webkit-background-clip: text;

This means that the background we are going to use is now clipped to the foreground of the text, so you are setting the background to the text. Now as the background is clipped to the text we can apply a gradient colour to this and it will be applied to the text.

#Putting Them All Together

Now we understand how to create a background gradient colour and how to clip the background to the text if we put it together you will create text which has gradient colours. First we need a HTML element to apply these settings for this we are just going to use a header item.

<h1>Text Gradient</h1>

Now add the following CSS to add your gradient colour.

h1 {
	font-size:80px;
	background-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(0, 0, 0, 1)),
	to(rgba(0, 0, 0, 0.2))
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
};