---
# System prepended metadata

title: Making gradient text with Tailwind CSS
tags: [tailwind, css]

---

---
layout: layouts/post.njk
title: 'Making gradient text with Tailwind CSS'
metaTitle: 'Gradient text with Tailwind CSS: The Short Guide'
metaDesc: 'Here is how to add gradient effect to text using Tailwind CSS'
socialImage: images/26-06-2021.jpg
date: 2021-06-26T03:00:00.000Z
tags:
  - css
  - tailwind
---

Gradient texts are super cool, I love the vibe it gives off and I have made this <a href="https://daily-dev-tips.com/posts/css-gradient-text-effect/" target="_blank">CSS gradient text effect</a> before.

Today we'll explore how we can do this in Tailwind CSS without adding any custom styles 👀.

![gradient text using tailwind css](https://i.imgur.com/k8VrBqs.jpg)

## Tailwind CSS gradient text

Let's get started by creating our heading and adding the tailwind classes we need.

```html
<h1
  class="font-extrabold text-transparent text-8xl bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600"
>
  Tailwind CSS
</h1>
```

This will be all we need to create this super cool gradient text effect. However, let's look at what these elements do;

The general styling

- `text-8xl`: Makes the text font-size 6rem, so quite big
- `font-extrabold`: Created a bigger font weight, so the effect pops more

The above styles are not needed for the actual effect. However, the classes below are needed to get the gradient effect we want.

- `text-transparent`: This makes the actual text transparent and shows the background (which has the gradient)
- `bg-clip-text`: This makes the background only show on the text outlines
- `bg-gradient-to-{flow}`: This is used to state what direction the gradients flows too. (<a href="https://tailwindcss.com/docs/background-image" rel="nofollow" target="_blank">All directions</a>)
- `from-{color}`: Set the beginning color in our case to purple-400
- `to-{color}`: This sets the end color, in our case pink-600

I've created this Codepen to demonstrate how it works.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="result" data-user="rebelchris" data-slug-hash="NWpmEJg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Making gradient text with Tailwind CSS">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/NWpmEJg" rel="nofollow" target="_blank">
  Making gradient text with Tailwind CSS</a> by Chris Bongers (<a href="https://codepen.io/rebelchris" rel="nofollow" target="_blank">@rebelchris</a>)
  on <a href="https://codepen.io" rel="nofollow" target="_blank">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on <a href="https://www.facebook.com/DailyDevTipsBlog" rel="nofollow" target="_blank">Facebook</a> or  <a href="https://twitter.com/DailyDevTips1" rel="nofollow" target="_blank">Twitter</a>
