Have you ever wanted to make a gradient title in CSS? It is very simple to achieve. This kind of styling adds charm to a boring website. Look at the picture below and read ahead how to do it…

First we need to add some CSS code to our HEAD section or our external CSS file:

Next we have to add this class to our title, eg.:

<h1 class="gradient">Gradient title in CSS</h1>

Remember that the gradient covers whole area (section, div or table) inside which the text is located. So if the width of div is 1100px and the text is short you will not see the gradient on this title. You should prepare a div which width is almost equal the text, then the gradient on title is visible.