I am writing a blog after a long time. So, today let us see something that will make your website look cool and beautiful.
Now what actually am I talking about?
So, today we are going to make a text filled with gradient colors!
Let's get started!
Step 1. We need our as always HTML:
<!DOCTYPE html>
<head>
<title>Gradient Text</title>
</head>
<body>
<h1>Welcome to my World</h1>
</body>
</html>
Step 2. CSS
We will give our h1's background a gradient look.
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#0040ff, #00ffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Now look at the codepen below for an example:
So, that is it for this blog.
My Github
Please if you like this post give it a heart and share it with your friends. Bye!
Top comments (0)