How to Create A Tailwind Gradient Background: The Ultimate Guide

Welcome! If you'd like to add a Tailwind gradient background to your site or project, then you've arrived at the right place! In this guide, we'll be taking a look at how you can create a gradient background using Tailwind CSS classnames.

Let's get started!

Creating the Background

Firstly, create the HTML element that you would like to contain the Tailwind gradient background. In the code snippet below, I've created a container that takes up the height and width of the screen.

The bg-gradient-to-br Tailwind classname creates a gradient that goes to the bottom right corner. The from-* and to-* classnames specify the start and end colors. In the example below, it starts with a purple color and then ends with a pink color.

<div className="h-screen w-screen bg-gradient-to-br from-purple-400 to-pink-400">
</div>

A quick preview of what this looks like is shown below (although I've adjusted the width and height so that it is displayed within this blog post):

Tailwind Gradient Inspiration + Examples

If you'd like some cool Tailwind gradient examples to try out, be sure to take a look at our collection of Tailwind gradients here.

You can also preview the gradient in full-screen by clicking on the gradient you'd like to preview. There are lots of examples to choose from, including those with cool tones, along with examples that feature bright pinks and orange hues.

Pastel examples

Pastel gradients can make for excellent backgrounds, and are great when you want to add a subtle decorative addition to a website or hero section. There's also a collection of pastel gradients available as part of the collection above too.

Conclusion

Thanks very much for reading this guide! I hope that you've found it useful for helping you create a Tailwind gradient background that you can add to your site. These can make for excellent backgrounds, especially for hero sections, feature cards and so forth. If you'd like to build landing pages with Tailwind, be sure to take a look at our collection of landing page templates.

Thanks again for reading, and wishing you the very best!