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:

Linear Gradient overlay on a background image

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:

Radial Gradient overlay on the background image

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:

Conic Gradient overlay

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:

Conic Gradient overlay on a background image


💾 Recommended Articles