-
Learn the values of box-shadow
Before we proceed to creating evenly box-shadow on four sides, let's first understand each value of box-shadow that we will use in this tutorial.
The box-shadow accepts four lengths: offset-x (horizontal offset), offset-y (vertical offset), blur-radius, and spread-radius, respectively. There is also an optional color after the length.
The offset-x and offset-y are required values. A Positive value of offset-x places the shadow to the right, while a negative value places it to the left of the element. Meanwhile, a positive value of offset-y places the shadow at the bottom, while a negative value places it at the top of the element.
The blur-radius and spread-radius on the other hand, are optional values. Omitting it would set it to 0. The larger the value of blur-radius the bigger the blur of the shadow. Furthermore, a positive value of spread-radius makes the shadow expand, while a negative value makes it shrink.
-
Create an evenly box-shadow on 4 sides
To apply box-shadow evenly on four sides, we need to set the offset-x and offset-y to 0. Then you can experiment with the values of blur-radius and spread-radius to get your preferred box shadow. See an example below.
box-shadow: 0px 0px 5px 1px hsl(0, 0%, 50%);
-
Without the blur
If you don't want the blur effect, you can set the blur-radius to 0, and it will be just like a border. See an example below.
box-shadow: 0px 0px 0px 1px hsl(0, 0%, 50%);
Conclusion
You can create an evenly box-shadow on four sides in CSS by setting the offset-x and offset-y to 0, while experimenting with the values of blur-radius and spread-radius to get your preferred box shadow.