The background image shows multiple colors with gradient overlays using css. It helps to make the background image more interactive and attractive for users. We can use two methods to get a background image with gradient overlays.
- Background image with linear gradient overlay Using CSS
- Background image with radial gradient overlay Using CSS
Background Image with Linear Gradient Overlay Using CSS
The linear gradient has CSS properties that allow different colors to be applied in different directions for background properties. Here, we can use the linear gradient for the background image property in the style tag. We can add multiple colors with different formats and many directions, such as angles and sides.
Syntax
The syntax below is employed for setting background images using linear gradients in CSS.
element {
background-image: linear-gradient(direction,
color1, color2, ...), url('image_url');
}
Examples
The subsequent instances demonstrate various gradient overlays featuring diverse directions and color schemes. By employing CSS attributes, we can apply linear gradient hues to the background image.
Example 1:
The subsequent instances demonstrate a linear gradient at a 50-degree angle incorporating RGB colors. Linear gradient colors can be applied to the background image by utilizing CSS properties.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Background image with gradient overlay Using CSS </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
background-image:
linear-gradient(50deg,
rgba(260, 70, 66, 0.75),
rgba(98, 83, 256, 0.50)),
url(
'https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f');
width: 100%;
height: 280px;
text-align: center;
color: #fff;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 50%;
right: 5%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Background image with gradient overlay Using CSS </h2>
<p> Background image with linear gradient overlay Using CSS: </p>
<div class = "container">
<!-- Add a text with the background image using CSS properties with the value. -->
<div class = "text-block">
<h4> Background Image with RGB color </h4>
<p> We can set the image and linear gradient using CSS </p>
</div>
</div>
</body>
</html>
Output:
The output linearly shows the background image.
Example 2:
The upcoming instances illustrate a linear gradient featuring a 10-degree angle and RGB color values. Linear gradient colors can be applied to the background image of the C# Tutorial logo by utilizing CSS properties.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Background image with gradient overlay Using CSS </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
background-image:
linear-gradient(10deg,
rgba(260, 70, 66, 0.75),
rgba(98, 83, 256, 0.50)),
url(
'https://d2jdgazzki9vjm.cloudfront.net/images/logo/jtp-logo3.png');
width: 100%;
height: 280px;
text-align: center;
color: #fff;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 50%;
right: 5%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Background image with linear gradient Using CSS </h2>
<p> C# Tutorial Logo Background image with linear gradient overlay Using CSS: </p>
<div class = "container">
<!-- Add a container with the CSS properties like padding and margin with the value. -->
<div class = "text-block">
<h4> Background Image with RGB color </h4>
<p> We can set the image and linear gradient using CSS </p>
</div>
</div>
</body>
</html>
Output:
The output linearly shows the background image.
Example 3:
The subsequent instances exhibit a linear gradient in the horizontal direction with RGB color values. Linear gradient colors can be applied to the background image of the C# Tutorial logo by utilizing CSS properties.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Background image with gradient overlay Using CSS </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
background-image:
linear-gradient(to right,
rgba(199, 70, 70, 0.75),
rgba(191, 199, 77, 0.50),
rgba(61, 144, 67, 0.50)),
url(
'https://d2jdgazzki9vjm.cloudfront.net/images/logo/jtp-logo3.png');
width: 100%;
height: 280px;
text-align: center;
color: #fff;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 50%;
right: 5%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Background image with linear gradient Using CSS </h2>
<p> C# Tutorial Logo Background image with linear gradient overlay from left to right Using CSS: </p>
<div class = "container">
<!-- Add a container with the CSS properties like padding and margin with the value. -->
<div class = "text-block">
<h4> Background Image with RGB color </h4>
<p> We can set the image and linear gradient using CSS </p>
</div>
</div>
</body>
</html>
Output:
The output linearly shows the background image.
Example 4:
The upcoming instances showcase the vertical linear gradient with hexadecimal colors incorporating transparency. Linear gradient colors can be implemented for the backdrop of the C# Tutorial logo through CSS attributes.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Background image with gradient overlay Using CSS </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
background-image:
linear-gradient(to bottom, #ff000080, #0000ff80, #ffff0080),
url(
'https://d2jdgazzki9vjm.cloudfront.net/images/logo/jtp-logo3.png');
width: 100%;
height: 280px;
text-align: center;
color: #fff;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 50%;
right: 5%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Background image with linear gradient Using CSS </h2>
<p> C# Tutorial Logo Background image with linear gradient overlay from top to bottom Using CSS: </p>
<div class = "container">
<!-- Add a container with the CSS properties like padding and margin with the value. -->
<div class = "text-block">
<h4> Background Image with hexadecimal color </h4>
<p> We can set the image and linear gradient using CSS </p>
</div>
</div>
</body>
</html>
Output:
The result displays the background image using a linear gradient.
Example 5:
The provided instances demonstrate the linear gradient utilizing the default orientation and varying colors and transparency levels.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Background image with gradient overlay Using CSS </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
background-image:
linear-gradient(oklch(from #f06d06 l c h / 50%), oklch(from #f06d06 l c h / 70%), oklch(from #f06d06 l c h / 20%)),
url(
'https://d2jdgazzki9vjm.cloudfront.net/images/logo/jtp-logo3.png');
width: 100%;
height: 280px;
text-align: center;
color: #fff;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 50%;
right: 5%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Background image with radial gradient Using CSS </h2>
<p> C# Tutorial Logo Background image with default direction: </p>
<div class = "container">
</div>
</body>
</html>
Output:
The result displays the background image using a linear gradient.
Background Image with Radial Gradient Overlay Using CSS
The radial gradient CSS feature is utilized to assign various colors in different orientations for background attributes. This technique is commonly employed within the background-image property of the style element. It allows for the inclusion of multiple colors in various configurations, including angles and sides. The radial gradient effect renders a circular or elliptical shape, adjusting the color spread to define the background image.
Syntax
The provided syntax is employed for setting background images using radial gradients in CSS.
element {
background-image: radial-gradient(shape/size,
color1, color2, ...), url('image_url');
}
Examples
The various illustrations exhibit diverse gradient overlays featuring a range of directions and color schemes. By leveraging CSS attributes, we have the capability to apply radial gradient hues to the background image.
Example 1:
The provided instances illustrate the radial gradient featuring circular shape or orientation and RGB color schemes. Radial gradient colors can be applied to the background image through CSS attributes.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Background image with gradient overlay Using CSS </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
background-image:
radial-gradient(circle,
rgba(260, 70, 66, 0.75),
rgba(98, 83, 256, 0.50)),
url(
'https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f');
width: 100%;
height: 280px;
text-align: center;
color: #fff;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 50%;
right: 5%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Background image with gradient overlay Using CSS </h2>
<p> Background image with radial gradient overlay Using CSS: </p>
<div class = "container">
<!-- Add a text with the background image using CSS properties with the value. -->
<div class = "text-block">
<h4> Background Image with RGB color </h4>
<p> We can set the image and radial gradient using CSS </p>
</div>
</div>
</body>
</html>
Output:
The result displays the background image with a radial effect.
Example 2:
The subsequent instances demonstrate the radial gradient with the elliptical shape or orientation and RGB color values. Radial gradient colors can be applied to the background image of the C# Tutorial logo through CSS attributes.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Background image with gradient overlay Using CSS </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
background-image:
radial-gradient(ellipse,
rgba(260, 70, 66, 0.75),
rgba(98, 83, 256, 0.50)),
url(
'https://d2jdgazzki9vjm.cloudfront.net/images/logo/jtp-logo3.png');
width: 100%;
height: 280px;
text-align: center;
color: #fff;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 50%;
right: 5%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Background image with radial gradient Using CSS </h2>
<p> C# Tutorial Logo Background image with radial gradient overlay Using CSS: </p>
<div class = "container">
<!-- Add a container with the CSS properties like padding and margin with the value. -->
<div class = "text-block">
<h4> Background Image with RGB color </h4>
<p> We can set the image and radial gradient using CSS </p>
</div>
</div>
</body>
</html>
Output:
The result displays the background image with a radial effect.
Example 3:
The upcoming instances exhibit the radial gradient with the nearest forms and hexadecimal colors. Radial gradient colors can be applied to the background image of the C# Tutorial logo by utilizing CSS properties.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Background image with gradient overlay Using CSS </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
background-image:
radial-gradient(closest-side, #ff000080, #0000ff80, #ffff0080),
url(
'https://d2jdgazzki9vjm.cloudfront.net/images/logo/jtp-logo3.png');
width: 100%;
height: 280px;
text-align: center;
color: #fff;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 50%;
right: 5%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Background image with radial gradient Using CSS </h2>
<p> C# Tutorial Logo Background image with radial gradient overlay for closest side Using CSS: </p>
<div class = "container">
<!-- Add a container with the CSS properties like padding and margin with the value. -->
<div class = "text-block">
<h4> Background Image with hexadecimal color </h4>
<p> We can set the image and radial gradient using CSS </p>
</div>
</div>
</body>
</html>
Output:
The output shows the background image with radial.
Example 4:
The radial gradient examples demonstrate the gradient without specific shapes or sizes, defaulting to ellipse shapes, and incorporating hexadecimal colors with opacity. Radial gradient colors can be applied to the background image of the C# Tutorial logo using CSS properties.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Background image with gradient overlay Using CSS </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
background-image:
radial-gradient(#ff000080, #0000ff80, #ffff0080),
url(
'https://d2jdgazzki9vjm.cloudfront.net/images/logo/jtp-logo3.png');
width: 100%;
height: 280px;
text-align: center;
color: #fff;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 50%;
right: 5%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Background image with radial gradient Using CSS </h2>
<p> C# Tutorial Logo Background image with radial gradient overlay for default shape Using CSS: </p>
<div class = "container">
<!-- Add a container with the CSS properties like padding and margin with the value. -->
<div class = "text-block">
<h4> Background Image with hexadecimal color </h4>
<p> We can set the image and radial gradient using CSS </p>
</div>
</div>
</body>
</html>
Output:
The result displays the background image with a radial gradient.
Example 5:
The provided instances demonstrate a radial gradient that excludes the outermost hues and kelch unit colors while incorporating opacity.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Background image with gradient overlay Using CSS </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
background-image:
radial-gradient(farthest-side, oklch(from #f06d06 l c h / 50%), oklch(from #f06d06 l c h / 70%), oklch(from #f06d06 l c h / 20%)),
url(
'https://d2jdgazzki9vjm.cloudfront.net/images/logo/jtp-logo3.png');
width: 100%;
height: 280px;
text-align: center;
color: #fff;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 50%;
right: 5%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Background image with radial gradient Using CSS </h2>
<p> C# Tutorial Logo Background image with radial gradient overlay farthest side Using CSS: </p>
<div class = "container">
</div>
</body>
</html>
Output:
The result displays the background image with a radial effect.
Conclusion
Using the gradient overlay property on a background image enhances the interactivity and animation of a webpage. By incorporating a gradient into the background image, developers and users have the option to create a more dynamic visual experience compared to using a single color or basic gradient alone.