CSS3 box-shadow Property

Here is a brief explanation of how to add shadow to an HTML element.

Explanation

Property :

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

Usage:


box-shadow:50px 50px 5px black;
box-shadow:50px 50px 5px 50px black;
box-shadow:10px 10px 30px 20px black inset;

Definition:

The box-shadow property attaches one or more shadows to an element. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0.

Example 1:


<div style='text-align: center;padding: 35px;width:100px;height:50px;border: solid 1px #555;background-color: #F2F5A9;box-shadow: 10px 10px 20px #F5A9F2;'>h-shadow</div>
Result:
h-shadow


Example 2:


<div style='text-align: center;padding: 35px;width:100px;height:50px;border: solid 1px #555;background-color: #F2F5A9;box-shadow: 40px 40px 40px 20px #F5A9F2;'>Blur</div>

Result:
Blur


Example 3:


<div style='text-align: center;padding: 35px;width:100px;height:50px;border: solid 1px #555;background-color: #F2F5A9;box-shadow: 10px 10px 30px 20px #F5A9F2 inset;'>Inset</div>

Result:
Inset



Ask Questions

Ask Question