cssbox-shadow

CSS: box-shadow on four sides with blur effect

I'm trying to get box-shadow on all 4 sides of my element.

I've tried box-shadow: 4px 4px 4px 4px 5px grey but it doesn't work. There also doesn't seem to be a rule for specifically setting the blur of a box-shadow.

Solution

  • If you have googled this a bit more, you would have found the answer right away.

    The box-shadow property syntax is the fallowing :

    box-shadow : horizontal offset | vertical offset | blur | spread | color ;

    So you want it on all sides means :

    1. No offsets.
    2. Blur as you like.

    Spread here is key to this, setting 10px to the spread means 5px on all sides, basically, half the amount will be on each facing side.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  padding: 30px;
  margin: 30px;
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: orange;
  box-shadow: 0px 0px 10px 10px grey;
}
    <div></div>

    Also if you want to customize that you always define multiple shadows separated by a comma.