Create Text Gradient Using Html Css ( Text Gradient Code)

Create Text Gradient Using Html Css ( Text Gradient Code)

Create Text Gradient Using Html Css ( Text Gradient Code)

Create Text Gradient Using Html Css ( Text Gradient Code)

 

Text Gradient Using Html Css


 Hello coders, A very warm welcome to CodeWithRandom today’s blog in which I show you how to create TEXT GRADIENT USING HTML AND CSS.

 This is a way to attract users to your content or when you want to design a stylish or modern stylish website then there are a lot of chances that you need to make a text gradient. The text gradient is a way to add text effect to your design instead of filling the background you can apply the gradient to a text. It is very popular all over the web. It is a smooth color of series…

So let’s start to create a Text gradient effect using HTML and CSS only……

 

HTML CODE For Text Gradient:-

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.Inside the body tag we are adding the main content of the website.

Here we are using the HTML basic concepts like div, and heading tag. Here we are using a div tag, heading tag, and paragraph tag.

In HTML we are adding an h1 class text gradient and inside that, we want to write the topic which you want to write. In this, it is a basic code you will easily understand…
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div class="main-container">
            <h1 class="text-gradient">Header with gradient</h1>
            <h2 class="text-gradient">Header with gradient</h2>
            <p class="text-gradient">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni
                quisquam voluptatem eveniet porro eum nobis necessitatibus
                quaerat aut suscipit officiis esse ab, quos odio nihil, itaque,
                debitis assumenda architecto quas.
            </p>
        </div>
    </body>
</html>
HTML OUTPUT Of TEXT GRADIENT:-

Here is the output of the HTML.

Create Text Gradient Using Html Css ( Text Gradient Code)

CSS CODE For TEXT GRADIENT:-

CSS stands for Cascading Style Sheet.CSS is used for styling the HTML. Instead of Using Pure/Plain CSS for styling, we can use CSS templates/frameworks like SASS, SCSS, Bootstrap, or Tailwind. But, Here we are using Plain CSS basic concepts for styling.

10 Things We Like About The Mazda MX-30

Here in the first step, we are filling the text gradient that is given in the code with the background also giving a center alignment to the h1 and h2 tags.
.text-gradient {
    background: -webkit-linear-gradient(45deg, #f44a2c, #f6c32c 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
h1,
h2 {
    text-align: center;
}
In the second step, we are trying to center the card in the window means we want to add height, width, margin, etc as given in the code. Here we are using the flex-box concept for styling.
The flex container becomes flexible by setting the display property to flex:

align-content
-Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines

align-items-Vertically aligns the flex items when the items do not use all available space on the cross-axis
display-Specifies the type of box used for an HTML element.

flex-direction-Specifies the direction of the flexible items inside a flex container.
flex-flow:-A shorthand property for flex-direction and flex-wrap.
flex-wrap-Specifies whether the flex items should wrap or not if there is not enough room for them on one flex line.
justify-content-Horizontally aligns the flex items when the items do not use all available space on the main axis.

.main-container {
    height: 100vh;
    width: 80vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

 

Last step is general styling pf body which we have to make only font-family.

 

/* General styling */
body {
    font-family: Verdana;
}

/

 

CSS OUTPUT Of TEXT GRADIENT:-

This is the final output after applying/writing  HTML code and CSS code.

Create Text Gradient Using Html Css ( Text Gradient Code)
Finally 🎊 your TEXT GRADIENT is done……Now you can use this effect to your websites to make it look more attractive and good.I hope you loved this blog.
If you like this blog comment in comment box and also share it to your friends so they can get to know about how to add gradient to text. if any doubt please feel free  free to ask in comment section………
Thankyou ……
Written by_Sayali Kharat & Himanshu Singh
Tags: , ,