One Sided or Two Sided Box Shadow in CSS

Today, we will learn how to apply shadows to to a box only or  one or two edges. First of all we will learn what is box shadow and then will look at different examples to apply them either one side or two sides to a box. Also remember, there is no support in IE8 and previous version.

Understanding box shadow

1. The horizontal offset of the shadow. A positive value means the shadow will be drawn to the right of the box, a negative offset will put the shadow on the left of the box.
2. The vertical offset of the shadow, a positive one means the shadow will be below the box, a negative one means the box-shadow will be above the box. 
3. The blur radius is optional and defines how big and how much blurred the shadow is, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be. It can’t be negative.
4. The spread radius is also optional, positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
5. Color of shadow, can be defined as rgba or hsla color values.

Example:

Creating an element with zero offsets will apply box shadow to all the edges to the container.

Try it yourself

Box shadow to one side

As in the classes above we have defined a blur radius to 10 pixel and spread value to a negative of 6px to hide the blur effect on others edges of containers.

We have set horizontal and vertical offsets to as per following to achieve the effect.

1. Top Shadow – zero horizontal offset as we don’t need left and right box shadow . A negative vertical offset of 8px to have shadow above the box.
2. Bottom Shadow – Just remove the negative sign before vertical offset in top shadow to shift the shadow down side.
3. Left Shadow – As a negative horizontal offset places the shadow to the left, we defined the CSS in that way along with zero vertical offset.
4. Right Shadow – Removing (-) sign from left shadow CSS will shift the shadow to the right.

 Shadow on two sides

Setting a horizontal as well as vertical offset will make box shadow on two side.

Providing horizontal and vertical offsets and switching their negative and positive values will create the shadows on two sides on the element as given in picture.

We can assign comma separated values to same property to have shadows on left – right or top – bottom or 3 sides of a container. Try these CSS and let me know what do you obtain.

Try these examples yourself