How to add background image with gradient overlay in CSS

In this short tutorial, we will learn how to add a background image with gradient overlay to the div.

Background images place an important role in modern web designs. It helps us to make the site look good and lets us highlight important sections of our webpage for the ease of the visitor.

With CSS, an element can have a background which can be a solid color, an image, or gradient. We can even mix both image and gradient together as background for any HTML element.

We can add it using the background-image property.

background-image: url('image.jpg');

Here, we will see how we can add an image with a gradient overlay.

Add gradient overlay to a background image using CSS

Gradient colors are the smooth transitions of one or more colors. We can specify the direction of the transition of the colors in our CSS too.

So to add a gradient overlay to a background image we will use two properties: background image url and gradient properties.

In CSS, we have three types of gradients:

1. Linear Gradients (progressive transition along a straight line between one or more colors)
2. Radial Gradients (defines by a center point, ending shape, and colors)
3. Conic ( color transitions rotated around a center point )

Let’s see each of them with an example.

HTML code:

 <div class="gradient-background">
        <h1>Gradient Background</h1>
 </div>

Linear Gradient overlay on a background image.

.gradient-background {
  height: 80vh;
  background-image: linear-gradient(
      to bottom,
      rgba(255, 0, 0, 0.514),
      rgba(255, 255, 0, 0.541)
    ),
    url("image.jpg");
}

Result:

Radial Gradient overlay on the background image

.gradient-background {
  height: 80vh;
  background-image: radial-gradient(
      rgba(255, 0, 0, 0.514),
      rgba(255, 255, 0, 0.541),
      rgba(0, 238, 255, 0.479)
    ),
    url("image.jpg");
}

Result:

Conic Gradient overlay on a background image

.gradient-background {
  height: 80vh;
  background-image: conic-gradient(
      rgba(255, 0, 0, 0.377),
      rgba(255, 255, 0, 0.541),
      rgba(0, 238, 255, 0.658),
      rgba(0, 128, 0, 0.658)
    ),
    url("image.jpg");
}

Result:

In conic-gradient we get repeating-conic-gradient function to repeat the conic gradient.

.gradient-background {
  height: 80vh;
  background-image: repeating-conic-gradient(
      rgba(0, 238, 255, 0.205) 10%,
      rgba(0, 102, 255, 0.384) 20%
    ),
    url("image.jpg");
}

Result:

Related Article:

Change image source (src) on hover using CSS