Good afternoon guys and today I will show you how to apply gradient color to text using CSS or Cascading Style Sheet. At first, it seems impossible and the first thing that will come to our mind is to slice the text label into a PNG or GIF image. It is possible to render the gradient color to text by means of CSS only. To follow this quick tutorial, you must have at least basic knowledge in HTML and CSS coding. If you have no experience of using these technologies mentioned, I strongly recommend you to visit the W3schools website to know and learn the basics.
No further ado, let’s start coding!
First step is to set up the HTML structure.
On this HTML structure, there is the heading1 or h1 element that needs to have a gradient color effect.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>How To Apply Gradient Color To Text Using CSS</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Second step is to create the CSS file – style.css
I’ve created a CSS file called style.css and put it inside the css folder.
<link rel="stylesheet" type="text/css" href="css/style.css">
Here’s the main source code of the style.css file. The gradient color that will be applied to the heading1 element is yellow to orange.
h1 {
font: bold 48px Arial, Helvetica, sans-serif;
text-align: left;
text-transform: uppercase;
background: linear-gradient(to right, #fefb01 0%, #fe4801 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 20px 0;
}
Here’s the updated HTML structure + the CSS file embedded on it.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>How To Apply Gradient Color To Text Using CSS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
We’re done!
Check Out The Preview
If you find it difficult to follow this tutorial, feel free to contact me and I will be happy to assist you. I hope you find this tutorial informative, interesting and useful to your website projects. Thank you.