Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.

Premium Features

Download Video

Tailwind Background Gradients

Published 2 months ago

A gradient is a combination of two or more colors that blend together. Creating a gradient with CSS involves using a background-image property set to the specific value of linear-gradient. A full gradient property looks like this:

linear-gradient(red, yellow);

This property would set the background of whatever element it is applied to, to a color that starts with red, then blends into a yellow. By default, this gradient would fade from left to right.

Gradient properties can get quite complex when adding multiple colors, especially if you want to start altering the colors' opacity as you begin creating your look. As a result, it's typically much easier to create your gradient using a library like Tailwind, which abstracts the CSS properties into classes to get the perfect blend of colors you're going for.

To create a gradient with Tailwind, you must apply a class that specifies what direction your gradient will start and end with. An example class would be bg-gradient-to-b. A full list of directional classes can be found within the TailwindCSS docs over at: https://tailwindcss.com/docs/background-image#linear-gradients

Once a direction is defined, you must declare what color you're going to start from, then which color you're going to end with. A full Tailwind gradient applied to an element looks like this:

<div class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500"></div>

This specifies to create a gradient that starts with a yellow color, blends into red, then ends with a pink. from defines the starting color, via defines any colors that should be placed in the middle, then to determines what color you'd like the gradient to end with.

The colors added onto these prefixes are part of Tailwind's color palette which can be found here for reference: https://tailwindcss.com/docs/background-color

You can mix and match these colors as needed to get the exact look you're going for. There's also no limit of how many colors you can put in the middle of your gradient with via, so feel free to add or remove via classes as needed.

Comments

Want to participate?

Create a free Chris Courses account to begin

Login

No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.