A Practical CSS Linear Gradient
Tags: webdev, css, gradient, tutorial
Published: 2020-05-14 12:04:31

---
title: A Practical CSS Linear Gradient
published: true
description: How to use a CSS linear gradient on a hero image so the top menu shows up better.
tags: webdev,css,gradient,tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/wf7bm3r8zb4y3ukr71f8.jpg
---

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&mdash;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.](https://dev-to-uploads.s3.amazonaws.com/i/orrl5i7utf99cntkdy3o.jpg)

## The Fix

We can use a [CSS linear gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) to darken the **part** of background image beneath the menu items.

![Easier to read menu items using a linear gradient.](https://dev-to-uploads.s3.amazonaws.com/i/69jjhzy95dr4cipg8pq9.jpg)

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!
1. **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

```css
/* || 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](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) 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.](https://dev-to-uploads.s3.amazonaws.com/i/wewv8vln0w2i58mls0em.jpg)

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.

```css
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?

![Softer bottom border.](https://dev-to-uploads.s3.amazonaws.com/i/klpw0twkqnvl49dmt9tf.jpg)

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.

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

## In the Wild

- [CodePen](https://codepen.io/marklchaves/pen/OJVdWdv)
- [caught my eye about page](https://www.caughtmyeye.dev/about/)

## 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 &amp; enjoy!