CSS box-shadow
CSS box-shadow property is used to add shadow effects to an element. More than one effect can be added by adding commas to each effects.
Syntax
box-shadow: [inset|outset] h-offset v-offset blur spread color;
box-shadow consists of following shorthand properties
- inset : It is the default value, and it is used to set the shadow outside the box.
- outset : It is used to set the shadow inside the box.
- h-offset : It is used to set the shadow for the horizontal position. If the value is positive shadow is on the right side of the box, if negative it will be in left side of the box.
- v-offset : It is used to set the shadow for the vertical position. If the value is positive shadow is below the box, if negative it will be on top of the box.
- blur : It is optional. It is used to set the density of the blur.
- spread : It is optional. It is used to increase or decrease the size of the shadow.
- color : It is optional. It is used to set the color of the shadow.
In the above example inset is the default value so no need to enter it.
In the above example values used in box-shadow property are,
2px - h-offset
3px - v-offset
50px - blur
4px - spread
blue - color
In the above example values used in box-shadow property are,
1px - h-offset
3px - v-offset
15px - blur
1px - spread
blue - color