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
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;
}
And BOOM! 🌟 we are done - if you want to know it better check my youtube tutorial here
hope you like it please subscribe 💖😊
Top comments (1)
Hope you are safe and fine at your place 😊
If you want to see the tutorial video here it is -
youtube.com/watch?v=Lg7fCUWx1Pc&t=85s
please also subscribe to my channel 💖😊