07-26-2023, 06:58 PM
Example:
<!DOCTYPE html>
<html>
<head>
<title>Shadows Example</title>
<style>
/* Apply a box shadow to the div element */
div {
width: 200px;
height: 100px;
background-color: lightblue;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div>This div has a shadow.</div>
</body>
</html>
Explanation:
CSS box-shadow property is used to create a shadow effect for an element. In this example, the div element has a light blue background color and a box shadow with horizontal and vertical offsets of 5 pixels each, a blur radius of 10 pixels, and a shadow color defined using RGBA notation.
<!DOCTYPE html>
<html>
<head>
<title>Shadows Example</title>
<style>
/* Apply a box shadow to the div element */
div {
width: 200px;
height: 100px;
background-color: lightblue;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div>This div has a shadow.</div>
</body>
</html>
Explanation:
CSS box-shadow property is used to create a shadow effect for an element. In this example, the div element has a light blue background color and a box shadow with horizontal and vertical offsets of 5 pixels each, a blur radius of 10 pixels, and a shadow color defined using RGBA notation.