DEV Community

Cover image for Make your Website's text look cool
Tilak Jain
Tilak Jain

Posted on

Make your Website's text look cool

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (0)