How to Create A Tailwind Gradient Button: The Ultimate Guide

Welcome! If you'd like to add a Tailwind gradient button to your website quickly and easily, then you've arrived at the right guide!

In this step-by-step tutorial, I'll be showing you how to create a gradient button using the Tailwind CSS framework. I've always loved the magic that gradients can add to websites, and gradients can add a stunning effect to buttons too!

Let's get started!

Step 1. Create Button HTML Markup

Firstly, create the markup for the button element:

<button type="button">
 Get Started
</button>

Step 2. Add Tailwind Gradient Background

To create a gradient background in Tailwind, the following classes are required:

className="bg-gradient-to-r from-indigo-700 to-purple-600"

The classes above specify a gradient that moves from left to right, and starts with an indigo color and moves towards a purple tone.

For our example, let's make use of this gradient in order to create a button with an indigo and purple gradient background. We'll also need to edit the button's text to a legible color too:

<button type="button" className="bg-gradient-to-r from-indigo-700 to-purple-600 text-white">
 Get Started
</button>

Step 3. Additional Styling

Next up, let's add some additional styling to the button, such as increasing the element's padding and adding a rounded border. A focus ring is also added to the button when it's in focus.

<button type="button" className="bg-gradient-to-r from-indigo-700 to-purple-600 text-white shadow-none focus:ring-4 text-base focus:ring-blue-300 font-medium rounded-3xl px-7 py-3 focus:outline-none dark:focus:ring-blue-800">
 Get Started
</button>

Full Example

Here's the full markup for our Tailwind gradient button example, along with the classes required for styling:

<button type="button" className="bg-gradient-to-r from-indigo-700 to-purple-600 text-white shadow-none focus:ring-4 text-base focus:ring-blue-300 font-medium rounded-3xl px-7 py-3 focus:outline-none dark:focus:ring-blue-800">
 Get Started
</button>

Preview

Here's what that looks like:

Creating Other Tailwind Gradient Buttons

This is only the beginning, there are so many variations and cool types of buttons you could create. I'd definitely recommend experimenting with different values for the gradient background, and you could quickly preview tens of variations with Isotope.

If you are looking for more gradient examples, be sure to take a look at our Tailwind gradient collection, which has lots of different gradients that you can export.

You could try other variations of the button, such as by adjusting the padding or text color. Or you could edit the rounded border by changing the border classname value.

Conclusion

Thanks again for reading, I hope that you've found it useful for helping you to create a Tailwind gradient button. If you're looking to quickly build landing pages and websites, I'd recommend taking a look at our Tailwind landing page library, which has over 120 pre-built website sections and components you can use to build sites. Plus it has lots of landing page templates and animated backgrounds included also.

You can create even more gradient buttons using the Isotope Editor, which could be excellent if you want to experiment with different backgrounds and gradient styles to see which works best for your project. When you have a button you'd like to export, you can then quickly export it along with the Tailwind classes required.

Thanks again!