CSS - Combine Background Image With Gradient Overlay
Last Updated : 16 Jan, 2025
Improve
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.
<!--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.
<!--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.
