07-26-2023, 06:57 PM
Example:
<!DOCTYPE html>
<html>
<head>
<title>Gradients Example</title>
<style>
/* Apply a linear gradient background to the div element */
div {
width: 200px;
height: 100px;
background-image: linear-gradient(to right, lightblue, lightgreen);
}
</style>
</head>
<body>
<div>This div has a gradient background.</div>
</body>
</html>
Explanation:
CSS background-image property can be used to create gradients. In this example, a linear gradient is applied to the div element, starting with the color light blue on the left and transitioning to light green on the right.
<!DOCTYPE html>
<html>
<head>
<title>Gradients Example</title>
<style>
/* Apply a linear gradient background to the div element */
div {
width: 200px;
height: 100px;
background-image: linear-gradient(to right, lightblue, lightgreen);
}
</style>
</head>
<body>
<div>This div has a gradient background.</div>
</body>
</html>
Explanation:
CSS background-image property can be used to create gradients. In this example, a linear gradient is applied to the div element, starting with the color light blue on the left and transitioning to light green on the right.