Shadows are a useful design tool that can be used to add shadow effects around an element's frame. The box-shadow property gives the ability to add multiple shadow effects separated by commas. A box-shadow is usually described by X and Y offsets relative to the element, blur and spread radius, and color.

• X offset => Positive value creates a shadow to the right and negative value creates a shadow to the left.

• Y offset => Positive value creates a shadow below the element and a negative value above the element.

• Blur => The bigger the value the bigger and lighter the shadow.

• Color => Color of the shadow.

In the above image, the shadow is

• 100px to the right (X axis)

• 10px below the element (Y axis)

• A blur radius of 10px

• The color is #e453d8

I hope this article helped you in one way or another.

Follow me on Twitter , I share my journey of becoming a developer.