Open In App

Create a Gradient Text Effect using HTML and CSS

Improve
Improve
Like Article
Like
Save
Share
Report

This article will show the approach to add a gradient effect on text using the background-clip CSS property. The final output of text using this effect is shown below. The CSS properties that would be used are flexbox, background-clip, and -webkit-background-clip and the background.

HTML Section: This section contains the HTML markup that will contain the text that has to be styled. The text has been wrapped in a container div as a good practice and to help it center on the page. The class gradient has also been added to the text. Nothing more complicated is needed in this section. 

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>CSS Text Gradient</title>
</head>
  
<body>
    <div class="container">
        <h1 class="gradient">
            Happy Halloween
        </h1>
    </div>
</body>
  
</html>


CSS Section: The CSS section would consist of styling the text using the gradient effect. A google font named Metal Mania is used to give it the desired effect. We will first reset everything in the CSS as a good practice. The Google Font to be used would be imported and used next. We will also center everything using flexbox properties.

CSS




<style>
    @import url(
  
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
  
    body {
        font-family: "Metal Mania",
            cursive;
    }
  
    .container {
        background: #000;
        height: 100vh;
  
        /* Center everything in the page */
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>


Creating the Gradient Effect: We will start making the main gradient effect. The logic is that a linear-gradient background is set for the text. Then the background is clipped to the size of the text. After clipping, the text color is set to transparent.

The inline-block property will make the background to the size of the heading text. The background-clip property with the text value will allow us to clip the linear gradient background up to the text. The -webkit prefix version is used to make it fail-safe. Making the text color transparent will only show the linear-gradient background.

CSS




<style>
    .gradient {
        font-size: 5rem;
  
        /* Set the background of
        the text  */
        background:
            linear-gradient(to right,
                #fcc133,
                #334efc);
        display: inline-block;
  
        /* Clip the background upto
        the text  */
        -webkit-background-clip: text;
        background-clip: text;
  
        /* Set the color of the text
        to transparent  */
        color: transparent;
    }
</style>


Complete Code:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>CSS Text Gradient</title>
  
    <style>
        @import url(
  
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
  
        body {
            font-family: "Metal Mania",
                cursive;
        }
  
        .container {
            background: #000;
            height: 100vh;
  
            /* Center everything in the page */
            display: flex;
            justify-content: center;
            align-items: center;
        }
  
        .gradient {
            font-size: 5rem;
  
            /* Set the background of 
                the text  */
            background:
                linear-gradient(to right,
                    #fcc133,
                    #334efc);
            display: inline-block;
  
            /* Clip the background upto
                the text  */
            -webkit-background-clip: text;
            background-clip: text;
  
            /* Set the color of the text
                to transparent  */
            color: transparent;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1 class="gradient">
            Happy Halloween
        </h1>
    </div>
</body>
  
</html>


Output:



Last Updated : 14 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads