One-Sided Box-Shadows with CSS

Learn Front-End Development

The Basic Box-Shadow

When most people use box shadows, they use a shadow with three length parameters and a color value–usually a color in rgba or red, green, blue, and alphpa (the alpha channel being the opacity of the color). An example is something like the following:

<style>
.box {
width: 100%;
height: 200px;
background: #33FCFF;
border: none;
}
.box-1 {
box-shadow: 2px 3px 4px rgba(0,0,0,0.5);
}
</style>
<div class="box box-1"></div>

Box-Shadow on One Side

The goal here is to achieve a more realistic box-shadow effect. In order to create a shadow that would, in theory, have a light source coming from a singular point, the shadow would need to only exist on one side of the box. For instance, the bottom of the box.

In order to accomplish this goal, we have to first understand the properties of CSS's box-shadow rule. The box-shadow rule accepts four length parameters and a color. The order of these is:

1. Horizontal offset
2. Vertical offset
3. Blur radius
4. Spread radius

When creating a box-shadow on one side only, we have to focus on the last value, the spread radius. The spread radius decreases the overall size of the box-shadow both horizontally and vertically. If you were to have a spread radius of -4px, the box's shadow would be reduced by 8 pixel–4 pixels horizontally and 4 pixels vertically. So, with this in mind, if we apply a negative spread radius whose absolute value is equal to the value of the blur radius, we would get a box shadow that is the exact same dimension as the element it is applied to. Therefore, if we apply a positive value to the elements vertical offset, we would get a shadow at the bottom of our box.

<style>
.box-2 {
box-shadow: 0 6px 4px -4px rgba(0,0,0,0.7);
}
</style> 
<div class="box box-2"></div>

Box-Shadow on Two Adjacent Sides

The goal here is to achieve a shadow on two adjacent sides of the box. In order to do this, we can either apply the basic shadow like in the first example on this page or we can do this with a slight variation to the box-shadow on one side as shown above.

For this effect, we don't want to shrink the shadow to account for blurring on both sides, but only one of the sides. Therefore, the spread radius will not have an opposite value as the blur radius, but will have half of that. The shadow will also need to be moved both vertically and horizontally, so both their values will need to be greater or equal to half of the blur radius as we want to make sure the shadow is hidden on the other two sides.

<style>
.box-3 {
box-shadow: 3px 3px 6px -3px rgba(0,0,0,0.7);
}
</style> 
<div class="box box-3"></div>

Box-Shadow on Two Opposite Sides

As of now, there isn't a great way to create a box-shadow on two opposite sides of the box. In order to accomplish this, we have to use the "Box Shadow on One Side" effect with two shadows.

<style>
.box-4 {
box-shadow: 5px 0 5px -5px rgba(0,0,0,0.7),
-5px 0 5px -5px rgba(0,0,0,0.7);
}
</style> 
<div class="box box-4"></div>