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
/* (Horizontal) offset-x | Vertical (offset-y) | color */
/* We can use Multiple shadows, separated by commas */
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.
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.
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.
All of the modern browsers support box-shadow property.