Posted on Jul 17, 2021

Pure CSS Text Typography Effect

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; }