Pure CSS Text Typography Effect

#css #html

Hello 👋 Guys Hope you are well and safe 😀 so in this post we will learn to create an amazing CSS Text typography using CSS Gradient - conic-gradient

Before we get started please subscribe to my channel 💖😊 I Post coding tutorials

https://youtube.com/c/Codingfire?sub_confirmation=1

This is what it is going to look like 👆

This helps you to get better in CSS so before wasting time lets get into it

first step is to create a HTML file and create a text so in this example i am going to take

  (type any text of you choice ) 
 <h2> Gradient text </h2>

So now our html is complete Yes only one h2 to do this or any paragraph or div text

<!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">
        <link rel="stylesheet" href="style.css">
        <title>Conic Gradient</title>
    </head>
    <body>
        <h2>Gradient text</h2>
    </body>
</html>

Now we need to add our style.css make sure that you linked it in your html file

after this go to css and write this 👇

h2 {
    /* Here we are setting the font size to 8rem */
    font-size: 8rem;

    /* Now you need to set gradient but not normal one - 
    you need to set
    Conic gradient (this is the main part of the gradient */

    background: conic-gradient(
            #CA4246 16.666%, 
    #E16541 16.666%, 
    #E16541 33.333%, 
    #F18F43 33.333%, 
    #F18F43 50%, 
    #8B9862 50%, 
    #8B9862 66.666%, 
    #476098 66.666%, 
    #476098 83.333%, 
    #A7489B 83.333%
    );
    /* Settings the background clip to text */

    /* so the background is like a text which i wrote and  */

    /* Number 1 - here what we do is we set the background to text and then make our text color transparent) */ 

    /* -webkit-background-clip: text;
    color: transparent; */

    /* Seconds way */

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}