Box Shadow
This CSS property is used to apply a shadow effect for an html element. This shadow will be applied to entire element as a background shadow but not for content. We have to use text-shadow property to apply shadow effect for the text.
Values for box-shadow property:
We can use box-shadow property with minimum 2 values or maximum 5 values.
The 5 values of box-shadow property are:
- Horizontal offset
- Vertical Offset
- Blur radius
- Spread distance
- Shadow color
<!DOCTYPE html>
<html>
<head>
<title>CSS Box Shadow</title>
<style>
.shadow{
margin-top: 100px;
margin-left: 100px;
width:200px;
height:200px;
background: rgb(100,192,245);
box-shadow:10px 10px;
}
</style>
</head>
<body>
<div class=”shadow”>
</div>
</body>
</html>