In this tutorial we will look at some creative approaches in using the CSS3 Box Shadow property. As it’s name implies, Box Shadows let you place a shadow effect behind an element. In most cases the box shadow is used to give depth to web layouts and is purely a web aesthetic. Most of the times it is used to enhance the user experience by adding a glow or something grab the user’s attention and guide them through a process. The possibilities are endless. That is why we will be going over some creative ways to implement the Box Shadow property into your design.

Long Shadow

long shadow css3

This effect is a recent trend in modern web design. It may not work in every case, but it is definitely a creative way of using multiple box shadows over make it look like a long shadow is being casted

A wrapping div is used in this case to help contain and position the element with the long-shadow class. The effect is done by adding multiple box shadows, one after the other going from dark to light or fade into the background color. Finding the right color and position of each shadow takes time but it is a very nice detailed effect to give your design the extra “pop” it needs.

Nav Bar Shadow

nav bar shadow

In many websites, you may have noticed that as you scroll, the top navigation bar follows you down the page. To give the illusion that the nav bar is floating and to help the user to distinguish the floating bar from the rest of the page, you can implement the box shadow technique.

Two new properties are very important in order to have your nav bar “float” over you page. the first is the position:fixed anchor your element to one spot on the window no matter where you scroll. Second is the z-index property. If you are not familiar with the z-index property, the easiest way to explain it is that it helps you layer and organize your elements on top of each other.

Glossy Button

glossy button css3

In most cases you may have simple “flat” buttons for your website. For many designers, they like to detail and add depth to their layouts. This calls for gradient colors, text-shadows and (you guessed it) box-shadows. A neat trick though is that you can use box shadows to add highlights to your elements to give them a “glossy” look.

In this example, we have multiple background gradients to help round our button. Gradients are great, but if you want your button to really stand out it needs a lighting source. By setting the box-shadow to inset, you can place the box-shadow inside the element instead of the outside. You can now control the color and range of the inner-shadow to add a sharp, crisp highlight to your button.

Inset Box

inset box css3

Our last example will use the same inset technique we learned about. This time, instead of making the element pop off the page, we are going to make it press into the page.

This technique has to use a little design theory to it. If something is pushed in, it will look darker as if it were going down. We also need to add an inner-shadow and a slightly darker border to help separate the element a little from the page.

Wrapping it Up

We provided four examples of how to use the box-shadow effect. The box-shadow is a great tool to help bring dimension and style to your web designs. As you can see, in order to get more detail in your elements, you need to add more box-shadows and gradients. Try practicing combining and adding these two techniques and see what you come up with.

Download Source Files