The CSS box-shadow property applies the shadow effect to elements:
Example1:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
height: 100px;
padding: 15px;
background-color: #e9c46a;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow.</div>
</body>
</html>
Output:
This is a div element with a box-shadow.
Example2 – Add color to the shadow:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
height: 100px;
padding: 15px;
background-color: #e9c46a;
box-shadow: 10px 10px #2a9d8f;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow.</div>
</body>
</html>
Output:
This is a div element with a box-shadow.
Example3 – add a blur effect to the shadow:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
height: 100px;
padding: 15px;
background-color: #e9c46a;
box-shadow: 10px 10px 10px #2a9d8f;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow.</div>
</body>
</html>
Output:
This is a div element with a box-shadow.
Example4 – an example of using the box-shadow property to create calendar cards: