CSS box-shadow property

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 on the below the box, if negative it will be in 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.

Example 1 - inset value in box-shadow

Try Yourself

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


Example 2 - outset value in box-shadow

Try Yourself

In the above example values used in box-shadow property are,

1px - h-offset

3px - v-offset

15px - blur

1px - spread

blue - color