CSS: a shadow on just one side of a box

Tweet

The following trick is quite interesting: we are going to create a box shadow only on one side of a box with CSS.
Just to be clear, something like:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I just added a white background to make it more clear...
Do you like it? Let's see how to do it.

The code

The above box is a div. The actual CSS code behind it is quite simple:

<style>
.box {
-webkit-box-shadow: 0 18px 14px -14px rgba(0,0,0,0.6);
-moz-box-shadow: 0 18px 14px -14px rgba(0,0,0,0.6);
box-shadow: 0 18px 14px -14px rgba(0,0,0,0.6);
border: 1px solid #333;
width: 40%;
color: #000000;
padding: 15px;
}
</style>

As you can see we used the box-shadow property.
Box-shadow has 6 possible values:
1) h-shadow (position of horizontal shadow)
2) v-shadow (position of vertical shadow)
3) blur (blur distance - optional)
4) spread (shadow size - optional)
5) color (shadow color - optional)
6) inset (type of shadow - optional)

In our code we played with the vertical and horizontal position of the shadow.
The horizontal position is set to 0 so the shadow is not present on the left side and right side of the box.
We set to 18 the vertical position. because it's a positive number the shadow will appear on the bottom border of the box.
We set to 14 the blur, to -14 the spread and we used rgba for the shadow colour.
Easy isn't it?

Following the above idea, it's easy to move the shadow on the left, the right or the top border of our box.
Top:

box-shadow: 0 -18px 14px -14px rgba(0,0,0,0.6);

Right:

box-shadow: 18px 0 14px -14px rgba(0,0,0,0.6);

Left:

box-shadow: -18px 0 14px -14px rgba(0,0,0,0.6);

And that's all. I hope you enjoyed the post and keep on following The web thought.