DEV Community

Cover image for Create a gradient text effect like Vercel with CSS
Sam
Sam

Posted on • Originally published at blog.dotenx.com

Create a gradient text effect like Vercel with CSS

Gradient overlay is one of the coolest yet simplest effects that has become very popular in recent years.

In this short tutorial, I'll show you how to create such an effect like what you see on sites like Vercel very easily.

Before we move on, remember you can implement your websites, landing pages, APIs, and more, with or without coding on DoTenX for free. Make sure to check it out and even nominate your work to be showcased.DoTenX is open-source and you can find the repository here: github.com/dotenx/dotenx.


We start by adding the text to the page:

<span class="gradient-text">Develop.</span>
Enter fullscreen mode Exit fullscreen mode

Now let's set the background-image:

.gradient-text {
    background-image: linear-gradient(90deg,#007CF0,#00DFD8);
}
Enter fullscreen mode Exit fullscreen mode

As you see this is the gradient colour we want, but not as the background.

Now let's make the text transparent:

    -webkit-text-fill-color: transparent;
Enter fullscreen mode Exit fullscreen mode

Finally, we set the background-clip property:

background-clip: text;
-webkit-background-clip: text;
Enter fullscreen mode Exit fullscreen mode

And this is the result:

Simple, yet effective!

Top comments (4)

Collapse
 
amircahyadi profile image
Amir-cahyadi

β€οΈπŸ‘ thaks for ur info sir

Collapse
 
mohsenkamrani profile image
Sam

I'm glad you find this helpful.

Collapse
 
janeksmietanek profile image
Arek Krysik

Pretty cool! Thanks!

Collapse
 
mohsenkamrani profile image
Sam

I'm glad you find it helpful.