Box-shadow with different size per side

Question

I am currently working on basing a design, in which the designer has used a shadow on a div. Since I am not fond of using images for this sort of thing, I have decided to take my CSS skills to the next level. I am completely new to CSS3, yet I want to give this a try using box-shadow. I have been reading into this new feature but I cannot seem to get my exact design working.

This is what I am searching for:

Top: 1px; Right: 5px; Bottom: 9px; Left: 5px

The designer has used different spreads (well, I believe it's called spreads in this context) for the shadow. My issue is that I cannot manage to get this working with different spreads per side of the div, can anyone help me?

Thanks in advance.

div {
    box-shadow: 0px 0px 5px #000;
}

Answer 1

The intention of box-shadow is to create a shadow of the div you are assigning it to. You can't make specific top-left-right-bottom parts bigger or smaller

See: http://css3gen.com/box-shadow/

The only way this can be done is to fiddle with the variables

For example:

box-shadow: 0px 9px 15px 5px #888888;

This box-shadow will generate a box-shadow that..

• [0px] doesn't shift left or right
• [9px] is 9px down
• [15px] has 15px of blur (play around with it for the desired effect)
• [5px] is 5px wide (on all sides)
• [#888888] has a grey color

Another way would be to use border-images.