Subtle text gradient with CSS Webkits

Front-end web developers primary job is to replicate designs given to them from designers. This doesn't mean we can’t have an eye for design.

In this tutorial I am going to show you an example of how you can take a linear gradient and apply it subtly in text. This can be used to give a sleek and exciting design that will remind you that gradients are still cool!

For this example we will be creating a floating section with a main text gradient. This clean design can be nicely used as a link or showcasing section on a webpage.

To acheive this design we will need to use some different webkits. Given this, it is important to note that this design will only work on webkit capable browsers (you may need to add fall-back properties). I will be briefly explaining webkits further down.

Start by adding the following html into your favourite text editor:

Step 1

Set up your html. I have added simple classes for this example, however, feel free to change accordingly. Notice that you need two H1 tags — this is so we can add a text-shadow without disrupting the effects created by the webkits.

Step 2

Next we have to style our body, section, .wrapper, h2, p and the rest of the classes we declared in our html. You can either copy the code I have provided (in the screenshot to the left) or create your own styling.

I created a small section that can be used as a link to another page showcasing JavaScript projects.

See my design (pre-webkits) below:

Pre webkit gradient design

Now that we have added the initial styling it is time to explain Webkits:

Webkit is a rendering engine for browsers. You may have seen some prefixes used in css code before. These prefixes tell the browser how to process the code.

The webkit prefixes that we will be using are:

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

webkit-background-clip allows you to change what is set as the background. If you set this to text, then it will allow you to set a manipulate the colour of your foreground, using the same css background property. It should look like this:

-webkit-background-clip: text;

webkit-text-fill-color is also needed to set the color for the text fill. If it is left unset then the css color property will be applied. To allow the linear-gradient to be seen instead of the default text fill we need to set it to transparent. This will look like this:

webkit-text-fill-color: transparent;

Step 3

Now lets add what we have learned into our code below.

Linear gradient set.

Lets start by adding our desired background. Add your linear gradient of choice. I added a slight orange to yellow gradient. Set at 45 deg.

Allowing your background property to target the foreground.

Next we will add in our background-clip property with a webkit prefix. Set this equal to text.

Making the text-fill transparent

Finally, we will add our text-fill-color property equal to transparent. Otherwise, the browser would fill the text with the default color of black.

Step 4

After picking your desired styling. It may be nice to add other features that incorporate the same gradient. In my design, I added gradient to my button to tie it all together.

Step 5: Admire your clean and subtle gradient effect.

Other example