This content originally appeared on DEV Community and was authored by CoderZ90
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 ??
This content originally appeared on DEV Community and was authored by CoderZ90
CoderZ90 | Sciencx (2021-07-17T14:01:55+00:00) Pure CSS Text Typography Effect. Retrieved from https://www.scien.cx/2021/07/17/pure-css-text-typography-effect/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.