DEV Community

Cover image for How to create a text gradient with tailwindcss
Méschac Irung for Tailus

Posted on

How to create a text gradient with tailwindcss

Text gradients can be a useful and visually appealing element of modern UI design, as they can add depth and interest to text and help it stand out on the page. However, it's important to use them sparingly and in a way that complements the overall design of your interface. Overuse of text gradients or using them in a way that is hard to read or not harmonious with the rest of the design can negatively impact the user experience.

In general, it's a good idea to consider the readability and legibility of your text when using gradients or other decorative effects. If the text is difficult to read or understand, it will not matter how visually appealing the gradient is.

Overall, text gradients can be a useful tool in modern UI design when used judiciously and in a way that enhances the user experience.

In this article, we'll cover how to create a gradient title using Tailwind CSS utilities.

First create a h1 tag and give it a content

<h1>Gradient title</h1>
Enter fullscreen mode Exit fullscreen mode

After creating a title, let's add some utilities to change our h1 size and weight :

<h1 class="text-5xl font-bold">Gradient title</h1>
Enter fullscreen mode Exit fullscreen mode

Add bg-clip-text utility

The bg-clip-text utility refers to the background-clip property in CSS, it determines the area within which the background color or image of an element is applied. It is used to clip the background image or color of an element and needs the content text to paint the background to our title or any other text.

<h1 class="text-5xl font-bold bg-clip-text">Gradient title</h1>
Enter fullscreen mode Exit fullscreen mode

After that, add text-transparent so that only the background will be applied as text color.

<h1 class="text-5xl font-bold bg-clip-text text-transparent">Gradient title</h1>
Enter fullscreen mode Exit fullscreen mode

Add gradient

Your result should be blank right now as we added text-transparent class, Now we need to add gradient background utilities to our title to see our gradient applied as text color.

<h1 class="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-500">Gradient title</h1>
Enter fullscreen mode Exit fullscreen mode

Now our title should look like :

tailus text gradient

You can add your brand's colors to make it fit with the rest of your UI elements.

Top comments (2)

Collapse
 
meschacirung profile image
Méschac Irung

Let me know what you think about it, the last time I used text gradient was on tailus.io website.

Collapse
 
jenueldev profile image
Jenuel Oras Ganawed

it seems that tailwind dont have transparent class