A Practical CSS Linear Gradient

I feel that there's a love-hate relationship with linear gradients. You either love them or hate them.

In this short tutorial, I think you'll learn to love using gradients for a particular case—the hero image.

The Problem

I think big and bold hero images are cool. But if you're not careful, then these images can make the top menu hard to read.

The Fix

We can use a CSS linear gradient to darken the part of background image beneath the menu items.

I like this solution because:

1. It's fast and flexible. I don't need to go into Photoshop. Photoshop is a great tool. But, photo editing is a cumbersome step in the workflow. And, if you mess up by making the image too light or not dark enough, you get to fire up Photoshop and edit the image again :-(. On the other hand, If we want to turn off the gradient or if we want to change the colour, we simply edit the CSS. Easy!
2. It's responsive. The CSS linear gradient is responsive. It's not "baked" into the image. It's a decoupled layer that can respond nicely to different devices. That's the way it should be for responsive web design (RWD).

The Code

/* || Gradient Stuff */

.hero::before {
    content: ""; 
    /* Control the gradient stops with percentages here. */
    background: linear-gradient(to bottom,rgba(0,0,0,0.65),rgba(0,0,0,0) 100%); 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* I don't want this too high because I only want to darken the top. */
    height: 300px; 
}

.hero {
    color: whitesmoke;
    text-align: center;
    height: 100vh;
    min-height: 550px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-image: url(https://marklchaves.files.wordpress.com/2020/01/bali-ubud-pasar-les-1-2-1280w.jpg);
}

Breaking it Down

I define a .hero CSS class. As you guessed, this class defines the full-height background image.

I use the before pseudo-element on the .hero class. This pseudo-element defines the linear gradient that overlays the hero image.

The gradient starts at the top as black with 65% opacity. It ends 300 pixels lower as black with 0% opacity (fully transparent).

Variations

1. We can create a solid bottom border for the menu.

I do this by specifying start/stop percentages for the two rgba colours. If I set the stopping point (25%) of the first rgba to the starting point (25%) of the second rgba, I create a solid border effect.

background: linear-gradient(to bottom,rgba(0,0,0,0.65) 10% 25% ,rgba(0,0,0,0) 25% 100%); 

2. Or, how about a softer bottom border?

Here, I set the starting point (30%) of the second rgba to slightly lower than the stopping point (25%) of the first rgba. This gives me a softer bottom border.

background: linear-gradient(to bottom,rgba(0,0,0,0.65) 10% 25% ,rgba(0,0,0,0) 30% 100%); 

In the Wild

• CodePen
• caught my eye about page

Wrapping Up

I wish I knew earlier how to do this technique! I think many of us didn't know what keywords to search on. And what's worse is, if you search on CSS linear gradients, the examples that come up aren't practical.

Thanks for reading. Share & enjoy!