<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
width: 300px;
padding: 20px 10px;
text-align: center;
border: 1px solid #8c8c8c;
}
#point{
box-shadow: 3px 6px;
}
#point1{
box-shadow: 3px 6px blue;
}
#point2{
box-shadow: 3px 6px 15px blue;
}
#point3{
box-shadow: 3px 6px 15px 5px blue;
}
#point4{
box-shadow: 3px 6px 15px 5px blue inset;
}
</style>
</head>
<body>
<h1>CSS box-shadow property</h1>
<h2>box-shadow: 10px 20px;</h2>
<div id="point">
Box shadow with h-offset and v-offset.
</div>
<h2>box-shadow: 3px 6px blue;</h2>
<div id="point1">
Box shadow with h-offset, v-offset and color.
</div>
<h2>box-shadow: 3px 6px 15px blue;</h2>
<div id="point2">
Box shadow with h-offset, v-offset, blur-radius and color.
</div>
<h2>box-shadow: 3px 6px 15px 5px blue;</h2>
<div id="point3">
Box shadow with h-offset, v-offset, blur-radius, spread-radius and color.
</div>
<h2>box-shadow: 3px 6px 15px 5px blue inset;</h2>
<div id="point4">
Box shadow with h-offset, v-offset, blur-radius, spread-radius, color and inset.
</div>
</body>
</html>