Make your typography stand out with gradient

Colors make an element stand out more because color appeals to our eyes. What if we are using gradients to our element, it is totally a different level, it makes pages more engaging and interesting.

Let's see how we can use gradient in our text with simple CSS tricks.

Styling Text

We will make our text big and large, so it will be more visible to us.

<div class="title">webdiary.tech</div>
 font-size: 6rem;
 font-weight: 900;
 font-family: sans-serif;

We can also use short-hand property "font".

 font : 900 6rem sans-serif;

Add Gradient to text

We add gradient colors with "background-image" property and can use two or more colors with gradient function.

Here we are using linear-gradient example, we are giving direction 60deg and applying two colors.

 background-image: linear-gradient(60deg, #660033, #008c46);

Note: If the gradient is covering the whole width that's mean it is a block-level element, use "display: inline-block" so it cover only text.

Clip a background to text

We can clip our background to the shape of the text with "background-clip" property. When we do that it hide behind the text and not visible to us.

We should use vendor prefixed "-webkit-background-clip" it works in all browsers.

 background-clip: text;
 -webkit-background-clip: text;

Text transparent 

Now we need to set color property to transparent, it will make the text fully transparent and the background will be visible to us.

 color : transparent;

Adding Fallbacks

Some older browser does not support background-clip to text and gradient, for that it is recommended that we can use @support feature queries, it allows us to add fallbacks.

 .title {
   display: inline-block;
   font: 900 6rem sans-serif;
   color: #660033;
 }
 
 @support (-webkit-background-clip) {
 	.title {
    	background-image: linear-gradient(60deg, #660033, #008c46);
        background-clip: text;
        -webkit-background-clip: text;
        text: transparent;
     }
 }

Here we are using color property outside of feature block so if background-clip do not support our text still match our theme color.

Codepen Example

See the Pen CSS text gradient by Mahvish Fatima (@Mahe76) on CodePen.