DEV Community

Cover image for A Practical CSS Linear Gradient
mark l chaves
mark l chaves

Posted on • Updated on

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.

Hard to read menu items using no linear gradient.

The Fix

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

Easier to read menu items using a linear gradient.

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Creating a solid border with gradient stops.

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%); 
Enter fullscreen mode Exit fullscreen mode

2. Or, how about a softer bottom border?

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%); 
Enter fullscreen mode Exit fullscreen mode

In the Wild

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!

Discussion (0)