Create a Gradient Text Effect using HTML and CSS - GeeksforGeeks

14 Jul, 2020
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("https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap");      * {        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("https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap");          * {            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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)