How to do gradient text with Tailwind CSS
Tags: tailwindcss, tutorial
Published: 2022-08-29 18:49:00

*This post was originally posted on [Design2Tailwind](https://design2tailwind.com/blog/tailwindcss-gradient-text/).*

---

In Tailwind CSS v3, gradient text has become a lot easier, here’s how to do it.

## Step 1: Add your gradient styles

```html
<h1 class="bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400">
	hello world
</h1>
```

Here are [the official docs](https://tailwindcss.com/docs/gradient-color-stops) on how to work with gradients in Tailwind but to break it down:

* `bg-gradient-to-r` creates the gradient and makes it from left to right
* `from-blue-600` sets our starting color, which will go on the left
* `via-green-500` sets our middle color, which is optional
* `to-indigo-400` sets our ending color, which will go on the right and can be optional if you want the end to be transparent

You can change these values to whatever suit your use case but this is the most common structure for working with gradients in Tailwind CSS


![Hello world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qk4gmsnbmjbqa3yl5tk.png)

### Optional but recommended

At this point, you may have noticed an issue with your code: if your text is short enough and you resize your window to a lower width, the text will move over the gradient colors.


![Hello world gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfugkz7objkuweh2tyan.gif)

This will cause an issue when you have the finished gradient text code. When you resize your window, the gradient colors in your text will change.

This is because the gradient we created takes up the full width of the element instead of the width of the text.


![Hello world2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ftbb2eesb44pgag12qau.png)

To fix this, all we need to do is add the `inline-block` class to our element.

```html
<h1 class="... inline-block">
	hello world
</h1>
```

Now, the gradient takes up _only_ the width of the text, instead of the width of the parent element.


![Hello world3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtpkeo0t2xuijgbhr0xd.png)

Problem solved! Now, let’s move on to the next step.

## Step 2: Make your text transparent

Make your text transparent using the `text-transparent` class.

```html
<h1 class="... text-transparent">
	hello world
</h1>
```

The text will disappear but don’t worry, we’ll fix that in the next step.

## Step 3: Clip the text to the background

This is the most important thing for making gradient text, it uses the [background-clip](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip) CSS property, which has multiple values and one of them is `text`, to use that specific property and value in Tailwind CSS we just need to add the `bg-clip-text` class.

```html
<h1 class="... bg-clip-text">
	hello world
</h1>
```


![Hello world4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bybr9nkgq2mvj6exghd1.png)

That’s it! We now have our gradient text 🥳

Putting it all together you get this snippet:

```html
<h1 class="bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400 inline-block text-transparent bg-clip-text">hello world</h1>
```

Here’s the [Tailwind Play link](https://play.tailwindcss.com/IYwLw0SZSa) if you want to play around with it.

***

That’s it for this one! I hope you learned how to make gradient text with Tailwind CSS and how to take into account how the width of the text changes the gradient colors and how to fix it.