DEV Community

Cover image for | PURE CSS TEXT TYPOGRAPHY EFFECT
yusuf._ch
yusuf._ch

Posted on

| PURE CSS TEXT TYPOGRAPHY EFFECT

in this post we will learn to create an amazing CSS Text typography using CSS Gradient - conic-gradient

OUTPUT IMG ABOVE 👆

LET'S PRACTICE

first step :

create a HTML file and create a text so in this example I am going to take

 <h2> your words here </h2>
Enter fullscreen mode Exit fullscreen mode

So now our html is complete :

<!DOCTYPE html>
<html>
    <head>
        <title> css typography </title>
        <link rel="stylesheet" href="main.css">
        <link href="http://fonts.cdnfonts.com/css/alphacentauri" rel="stylesheet">

    </head>

    <body>
        <h2>DESKTOP</h2>
    </body>
</html>

Enter fullscreen mode Exit fullscreen mode

2nd step :

Now we need to add our main.css !make sure that you linked it with your html file

after that , go to css editor and write this 👇

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'AlphaCentauri', sans-serif;

}
html,
body
{
    width: 100%;
    height: 100%;

}
body
{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: aliceblue; 
}
h2
{
    font-size: 5rem;
     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%
    );
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color:transparent  ;

}
Enter fullscreen mode Exit fullscreen mode

end

don't forget /* https://twitter.com/YousufCharrouf?s=09 -

*/

/* https://instagram.com/yusuf._ch?utm_medium=copy_link */

Discussion (2)

Collapse
6lvckgafurova profile image
yusuf._ch Author

Hello Anjam ,

Thanks for your comment .