Text Gradient Using HTML And CSS Code Only

Text Gradient Using HTML And CSS Code Only

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Text Gradient Using HTML and CSS Only. Before That, We Could See What This Project Is About.

In This Project, We are creating a text that needs to be gradient. With the help of CSS, We are adding our gradient property to the required text.

Why we are using the gradient text because it comes with real-time eye-catching design which makes users attracted towards it when we add it to the websites also mostly is used in dark-colored websites and designs in which it stands out separately in use design concept. It might be interesting right? , If we create it.

So,  Let’s Begin Our Text Gradient Journey By Adding The Source Codes. For That, First, We Are Using The Html Code.

 

Html Code Text Gradient

<h1 class="text">Code With Random</h1>

 

Here We are simply adding an text that needs to be done with gradient design by using the header tag(H1) with a separate class name.

Also the project code pen link is given at the end of this blog, but before that we must know that we should add the requisite html and body tag to perform the project without any errors. Inside it the required text.

Now , The HTML code is completed , So Let’s We begin styling our text with gradient properties to complete the project successfully.

 

CSS-CODE: Text Gradient

$font: 'Poppins', sans-serif;

::selection { background-color: #C3CFE2; }

body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: linear-gradient(to right, #FDFBFB, #EBEDEE 70%);
}

.text {
    text-transform: uppercase;
    background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font: {
        size: 20vw;
        family: $font;
    };
}

 

Now We have added our CSS code successfully. In this code, We first import the font family using the CSS advanced properties for the fonts that need to be in this style format.

100+ Front-end Projects for Web developers (Source Code)

Secondly, With the help of the CSS Selection property, we are adding the background color. After that, We are fixing the alignment properties (width and height) and then the flexbox properties( align-items and justified-center) to align the text and its properties to the center.

And one more thing here we do is add the gradient property using a linear-gradient method and inside of it, we give the colors to appear on the text. the code for explanation is down below.

body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: linear-gradient(to right, #FDFBFB, #EBEDEE 70%);
}

 

Third, We are adding the linear gradient color from the left side to the right side by giving percentile values which makes the shade according to it. Then lastly we just make text to pure gradient by adding the -web kit properties which makes the shade color change in some parts of the text and calling out the font family by a dollar sign and fixing the font size to make the text align to different screens.  The Specific part is down below.

.text {
    text-transform: uppercase;
    background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font: {
        size: 20vw;
        family: $font;
    };
}

 

Now We have completed our CSS code Successfully. We are now coming to the end of this project but before that, we make sure to see the preview of our project in Output Section.

Final Output Of Text Gradient

Now We have Successfully created our Text Gradient Using HTML and CSS Only. You can use this project for your personnel needs and the respective lines of code is given with the code pen link mentioned below.

If you find out this Blog helpful? , Then make sure to search code with random on google for Front End Projects With Source codes and make sure to Follow the Code With Random Instagram page.

 

REFER CODE – Leo Campos

WRITTEN BY – Ragunathan S

Share on:

Leave a Comment