How to Darken Background Image in CSS

1. Use Linear Gradient to Darken Background Image in CSS
2. Use the background-blend-mode Property to Darken Background Image in CSS

In this article, we will introduce a few methods to darken background images in CSS.

Use Linear Gradient to Darken Background Image in CSS

We can use the CSS Linear Gradient to Darken the Background Image in CSS. The linear-gradient() function creates a background with a linear gradient. A linear gradient is a smooth transition between at least two different colors. The function takes a countless number of color parameters. We can set the direction of the gradient as the first parameter. The options of the directions are to right, to left, to bottom right, 90deg, etc. We can apply the linear gradient to the background image and set the darker color with opacity to darken the background image. We can use the rgba() function in the linear-gradient() function to set the colors. Here, we will only darken the background image without darkening other elements.

For example, select the container in CSS and use the background shorthand property to set the linear gradient and background image. Write the linear-gradient() function and give the two color stops as rgba(0, 0, 0, 0.7). Next, use the url() function to set a background image of your choice. Use the various background properties to place the image correctly in the background. Set background-position to center, background-repeat to no-repeat, and background-size to cover. Set the height to 100%. Make sure to select the body and html tags and set the height to 100% and margin to 0.

In the example below, we used rgba(0, 0, 0, 0.7) as the two color stops. The function rgba(0, 0, 0) equals to black color. The fourth value is the value for opacity. The value closer to 1 makes it darker and vice versa. We can adjust the opacity value according to the need to darken the background image. In this way, we can use the linear gradient to darken the background image in CSS.

Example Code:

<div id="background"></div>

body, html {
    height: 100%;
    margin: 0;
}

#background {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Use the background-blend-mode Property to Darken Background Image in CSS

We can use the background-blend-mode property to darken the background image in CSS. The property sets the blending mode of the background. There are various options for this property. Some options are normal, multiply, darken, lighten, saturation, etc. We can use the darken option to make the background image darker. We can set the color of the background image using the rgba() function.

For example, select the background id in CSS and use the background property to set the color and the background image. Set the color as rgba(0, 0, 0, 0.7) and use a place holder image in the url() function. Use the different background properties as in the first method to set the image correctly. Next, use the background-blend-mode property and set it to darken.

In this way, we can darken the background image using the background-blend-mode property.

Example Code:

#background {
    background: rgba(0, 0, 0, 0.7) url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: darken;
}

<div id="background"></div>