How Box Shadow CSS can make any Website more Attractive

Before the emergence of CSS one was required to use images in Photoshop to make proper shadows around texts or boxes. These days are over, even though CSS has been used for quite some time now to make box shadows, with the coming of CSS3 it has achieved more of standards.

The box shadow property gives web developers the chance to insert various drop shadows to items, with specific and varying color, size, offset and even blur. CSS3 offers growing support for all browsers, although Mozilla and Webkit still require extra coding. The following is an example of a box shadow using CSS3.

The basic css code used is as follows:

#example {
box-shadow: 10px 10px 5px #888;

However, since some features of CSS3 are still in experimental phase, the following code should be used for Mozilla and Webkit:

#example {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;

The Box shadow item accepts a list of shadows separated by commas. The following syntax applies:

 none | <shadow> [ , <shadow> ]*

<shadow> = inset? && [ <length>{2,4} && <color>? ]


Let’s have a look at how to create a basic outer box shadow. To generate the basic of box shadows, one must first identify two of the first parameters, the horizontal as well as the vertical offset of box shadow. See example below. By varying the parameters you can easily create various shadows that make your website look a lot more interesting.

box-shadow: 3px 3px;

By adapting the spread radius, you can redefine shadows to make them bigger or smaller:

box-shadow: 0px 20px 10px -10px #888;

Positive values allow the box shadow to move up and to the right, whereas negative values move it down and to the left. As there is no color specified in this example, the color will be chosen based on the context, however, some programs of late might choose differently.  To insert a distinctive color, you should use the following code:

box-shadow: 3px 3px darkgreen;

Next you should decide on the blur effect of the shadow. Various effects can be achieved while inserting a ‘’blur’’, even when the shadow offset equals zero; a shadow effect can be achieved merely by blurring. The following example gives an offset of zero, while a blur has been inserted.

box-shadow:0 0 9px black;

If you want to make it all the more elaborate you could choose to add different shadows to one box. For example, your box could look like this:


Isn’t that a sight for sore eyes? Now, not everyone favors his website to look like this. Many just want a design that is simple and clean. The great thing about the box shadow property in CSS3 is, that you can change it any way you like. If you want to add several shadows like in the example above, all you need to do is add multiple values divided by commas.  Make a smooth and simple design by applying two shadows instead of six, as above. Whatever you choose to do, CSS3 provides the perfect tools!