CSS Combine background image with gradient overlay

Last Updated : 24 Jan, 2024

CSS gradients allow us to display smooth transitions between two or more colors. They can be added on top of the background image by simply combining the background-image URL and gradient properties.

Table of Content

Using linear-gradient
Using radial-gradient

Syntax:

For linear-gradient on top of the Background Image:

element {
   background-image: linear-gradient(direction, 
    color-stop1, color-stop2, ...), url('url');
}

For radial-gradient on top of the Background Image:

element {
   background-image: radial-gradient(direction, 
   color-stop1, color-stop2, ...), url('url');
}

Using linear-gradient

In this a, approach linear gradient overlay is applied to a background image using the linear-gradient property within the .geeks class. The gradient transitions from a red to blue color with an opacity of 0.75, enhancing the visual appeal of the background.

Example 1: Background image with the linear gradient.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Background Image with Linear Gradient</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        .geeks {
            background-image:
                linear-gradient(45deg,
                    rgba(245, 70, 66, 0.75),
                    rgba(8, 83, 156, 0.75)), 
                      url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png');
            width: 100%;
            height: 280px;
            text-align: center;
            color: #fff;
        }
    </style>
</head>
 
<body>
    <div class="geeks">
        <h3>This is my background!</h3>
    </div>
</body>
 
</html>

Output:

Using radial-gradient

In this example, a radial gradient overlay is applied to a background image using the `radial-gradient` property within the `.my_bg` class. The gradient smoothly transitions from orange to yellow with varying opacities, creating a visually appealing background effect.

Example 2: Background image with the radial gradient.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Background Image with Radial Gradient</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        .my_bg {
            background-image: radial-gradient(rgba(255, 49, 3, 0.896),
                    rgba(251, 255, 0, 0.75)), url(
'https://media.geeksforgeeks.org/wp-content/uploads/20200120152724/gfg_icon.png');
            width: 100%;
            height: 250px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div class="my_bg">
        <h4>This is my background!</h4>
    </div>
</body>
 
</html>

Output:

HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.