CSS - Combine Background Image With Gradient Overlay

Last Updated : 16 Jan, 2025

Combining background images with gradient overlays in CSS enhances visual appeal by adding depth and style to web elements.

1. Using linear-gradient

Apply a linear gradient overlay to a background image for a smooth color transition.

HTML

<!--Driver Code Starts-->
<html>
<head>
    <style>
        .overlay {
            background-image: 
<!--Driver Code Ends-->

                linear-gradient(
                    to bottom right, 
                    rgba(255, 0, 0, 0.5), 
                    rgba(0, 0, 255, 0.5)
                ), 
                url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png');
            width: 100%;
            height: 280px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="overlay">
        <h3>This is my background!</h3>
    </div>
</body>
</html>

<!--Driver Code Ends-->

linear-gradient(to bottom right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)) creates a gradient from red to blue with 50% opacity.
The gradient is layered over the background image, enhancing its appearance.

2. Using radial-gradient

Apply a radial gradient overlay to a background image for a circular color transition.

HTML

<!--Driver Code Starts-->
<html>
<head>
    <style>
        .overlay {
<!--Driver Code Ends-->

            background-image: 
                radial-gradient(
                    rgba(255, 165, 0, 0.5), 
                    rgba(255, 255, 0, 0.5)
                ), 
                url('https://media.geeksforgeeks.org/wp-content/uploads/20200120152724/gfg_icon.png');
            width: 100%;
            height: 250px;
            display: flex;
            justify-content: center;

<!--Driver Code Starts-->
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="overlay">
        <h4>This is my background!</h4>
    </div>
</body>
</html>

<!--Driver Code Ends-->

radial-gradient(rgba(255, 165, 0, 0.5), rgba(255, 255, 0, 0.5)) creates a gradient transitioning from orange to yellow with 50% opacity.
The radial gradient overlays the background image, providing a distinct visual effect.

How to combine background-image and gradient on the same element using CSS3 ?

shruti10gandotra

Improve

Article Tags :

CSS - Combine Background Image With Gradient Overlay

1. Using linear-gradient

2. Using radial-gradient

Similar Reads

Thank You!

What kind of Experience do you want to share?