CSS3 Box Shadow

Box shadow property is used to create shadow effects with CSS. The same thing previously done on Image it was tricky to use in html. The box-shadow property effect can be applied on one or more elements by a comma-separated list.

The box-shadow property can have 2-6 options, the main options are horizontal offset and vertical offset and two optional options are used to distance and color.

I am describing here about box-shadow values:

Syntax of Box Shadow

box shadow css example

Horizontal Offset & Vertical Offset

  • offset-x describes the horizontal distance and negative value can place the offset-x shadow to the left of the element
  • offset-y describes the vertical distance and negative value can place the shadow to the top of the element.

Both the above values are required. If you are assigning both values offset-x and offset-y to 0, the shadow will appear behind the element.

Blur Radius

This is also a required value. If you use higher number, it will be more blurred and if you are assigning blur-radius value to 0 the shadow will be sharp. If you are assigning box-shadow to 2px and blur-radius to 2px it means you will have 4px total shadow effect.

Spread Radius

This is not a required value. The default value is set to 0 and if you are increasing the value, it will increase the size of shadow while negative values will decrease the size.


This is a required value. One can use any kind of color value like rgb, rgba, hex, name, hsla. If you are not specifying the color value the color will be taken from foreground color property and will also depend on your browser behaviour.

Browser Support

All of the modern browsers support box-shadow property.

  • Internet Explorer 9.0 and higher
  • Firefox 3.5 and higher
  • Chrome 1 and higher
  • Safari 3 and higher
  • Opera 10.5 and higher
October 20, 2017 by admin

Add a Comment

Your email address will not be published. Required fields are marked *