In this tutorial, we are going to add a gradient overlay to the banners on an index page in Brine.

We are going to use some custom CSS to not only create the gradient for every banner, but I also want to show you how to use a fancy code trick called a pseudo-class to identify individual sections so you can change each index page banner separately.

The codes you need are below, but make sure you watch the tutorial so you know how to use them!

I also have a guide to gradients that you can check out here. It breaks down how to create a gradient code and has 35 for you to try!

Here are the codes from the tutorial:

Add the same gradient overlay to every banner image:

.Index-page--has-image {background:linear-gradient(rgba(255,255,255,0) 80%, #fff) !important}

Add a gradient overlay to a specific banner image:

.Index-page--has-image:nth-child(1) {background:linear-gradient(rgba(255,255,255,0) 80%, #fff) !important}