DEV Community

loading...
Cover image for Know How to apply box-shadow on all four sides.

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

gautham495 profile image Gautham Vijayan Updated on ・2 min read

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;
}

Enter fullscreen mode Exit fullscreen mode

And get results like,

chrome-capture (3)

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;
}

Enter fullscreen mode Exit fullscreen mode

chrome-capture (6)

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

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

Enter fullscreen mode Exit fullscreen mode

You will get results like,

chrome-capture (4)

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:

Discussion (8)

pic
Editor guide
Collapse
mdhesari profile image
Mohammad Fazel

can you explain why this happens?

Collapse
gautham495 profile image
Gautham Vijayan Author

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.

Collapse
tuantmtb profile image
Thread Thread
tuantmtb profile image
Collapse
crivion profile image
Collapse
gautham495 profile image
Gautham Vijayan Author

Thank you for appreciating!

Collapse
fidelamendola1976 profile image
Fidel Amendola

Hey Gautham!!.
Great tutorial about box shadow. I'm a huge fan of CSS and your post helps me a lot. 👍

Collapse
gautham495 profile image
Gautham Vijayan Author

Thank you for your valuable comment.