CSS Box Shadow

So in this topic , I'll cover about box-shadow propery in CSS.
So first we'll know about general syntax of box-shadow property.
General Syntax of Box-Shadow Property

1)Drop shadow:
A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image.
Drop Shadow
Drop Shadow o/p

2)Inner Shadow:
An inner shadow can be rendered using the inset property value.
Inner Shadow
Inner Shadow o/p

3)a)Offset Drop (bottom-right) shadow:
Bottom-right
bottom-right o/p

3)b)Offset Drop (top-left) shadow:
top-left
top-left o/p

4)a)With inset:
If the inset keyword property value is present,the box-shadow will appear inside the HTML element as you can see in the Image.
With inset
With inset o/p

4)b)Without inset:
w/o inset
w/o inset o/p

5)a) Horizontal offset:
The Horizontal offset value controls the x-axis position of the box-shadow.
horizontal offset
horizontal offset o/p

5)b) Vertical Offset:
The vertical offset controls the box-shadow's position on the y-axis.
vertical offset
vertical offset o/p
Note:

  • +ve value shift the box-shadow to the right

  • -ve value shift the box-shadow to the left

6)Blur radius:
If the blur radius is 0 ,the box-shadow will be sharp and it's color will be solid. As you increase the value , it'll become blurrier and more opaque
blur radius
blur radius o/p

7)Spread distance:
It makes the box-shadow larger or smaller in all directions.

a)+ve (spread distance )value-
the box-shadow will grow in size on all sides
+ve spread distance
+ve spread distance o/p

b)-ve (spread distance) value-
box-shadow contract on all sides
-ve spread distance
-ve spread distance

8)Color:
color value sets the box shadow's color.
color
color o/p

42