How To Create Linear Gradient Text USing Html And CSs

admin_img Posted By Bajarangi soft , Posted On 13-10-2020

The linear-gradient is a kind of text-styling in which the text is filled with linear-gradient color codes. These kinds of effects are generally used in dark-themed websites or apps to make the text look attractive and bold. They are almost suitable for dark themes and do not go well with the lighter themes.

Linear Gradient Color

Approach:
Please refer linear-gradient(), method to sreate a gradient background and then use webkit properties to overlay that background with our text.
HTML Code: In the following section, the text used for demonstration is wrapped inside h1 tag.

<!-- Write HTML code here -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
            "width=device-width,
      initial-scale=1.0" />
    <title>Gradient Text</title>
</head>
<body>
<h1>BAJARANGI SOFT</h1>
</body>
</html>

CSS Code: For CSS code, please follow the steps given below.

  • Step 1: Apply a basic background to the body tag and align the text to center of the page.
  • Step 2: Do some basic styling like font-size and family etc.
  • Step 3: Apply the linear gradient property with any colors of your choice.
  • Step 4: Now apply webkit properties, the first one will make the whole gradient-background transparent and the second property will fill the text with the gradient background.
Note: You can apply some shadow to the text to give it a darker or matte finishing kind of look.
<style>
    body {
        background: rgb(39, 39, 39);
    }

    h1 {
        position: absolute;
        top: 40%;
        left: 40%;

        font-size: 40px;
        font-family: Arial,
        Helvetica, sans-serif;
        background: linear-gradient(
                to right, #f32170, #ff6b08,
                #cf23cf, #eedd44);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
    }
</style>
Complete Code: It is the combination of the above two sections of code.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
            "width=device-width, initial-scale=1.0" />
    <title>Gradient Text</title>
    <style>
        body {
            background: rgb(39, 39, 39);
        }

        h1 {
            position: absolute;
            top: 40%;
            left: 40%;

            font-size: 40px;
            font-family: Arial, Helvetica, sans-serif;
            background: linear-gradient(to right, #f32170,
            #ff6b08, #cf23cf, #eedd44);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }
    </style>
</head>

<body>
<h1>BAJARANGI SOFT</h1>
</body>

</html>

Related Post