Know How to apply box-shadow on all four sides.

This tutorial will help you to know how you can apply box-shadow on all four sides.

So you have decided to apply some box-shadow for your buttons or other elements in your project. You try box-shadow for the first time with,

.button{box-shadow:2px 2px 2px red;}

And get results like,

A simple definition of the properties used in box-shadow,

• The first parameter is horizontal offset, that is in positive X-axis we will get the color we specify.
• The second parameter is vertical offset, that is in positive Y-axis we will get the color.
• The third parameter is blur radius, that is how much the color specified is blurred out.
• The fourth parameter is spread radius,that is how much the color spreads.

We can also use negative values to get results in opposite direction of the above mentioned properties.

.button{box-shadow:-2px -2px 2px red;}

If you want box-shadow on all four sides use,

.button{box-shadow:0 0 7px red;}

You will get results like,

Its because as horizontal and vertical offsets are zero, the blur property is applied to the color specified and it shows it in all directions evenly without being projected to go to only horizontal and vertical sides.

And thats how we can easily apply four-sided box-shadow to our website elements.

My Personal Experience:

I use it all the time in buttons, because when used in the right manner, it gives the CTA(Call To Action) Buttons to be more trendy and visible to the user.

Thank you for reading!

If you like this article, Unicorn this one! Heart/Like this one and save it for reading later.

My Other Articles:

• Universal CSS properties everyone must know

• Create-react-app

• Git for beginners

• Change headers in react with react-helmet