Change direction of existing CSS shadow

Question

I have the following CSS shadow:

box-shadow:green 0 1px 3px;

Now, if I want to change only the direction of the shadow, I tried:

box-shadow:inherit 2px 0 inherit;

But this does not work unfortunately. Also it doesn't look like there are additional properties available like:

box-shadow-direction:2px 0;

Or

box-shadow-color:inherit;

---

How can the direction be changed without changing the color or strength?

Answer 1

As of I know there is no sub-attribute like background-repeat, margin-left, border-bottom for box-shadow, text-shadow CSS3 attributes. For more details, please refer: http://www.w3.org/TR/css3-background/#box-shadow .

The ‘box-shadow’ property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional ‘inset’ keyword. Omitted lengths are 0; omitted colors are a UA-chosen color.

Where

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

So, you can't give a sub-attribute like box-shadow-direction:2px 0; after defining box-shadow to an HTML element until it or similar sub-attribute came to live in next versions of CSS.

Answer 2

A box shadow is defined like this: x y blur spread color.

So if you want to move your box shadow, change your x and y.

box-shadow: 10px 10px 5px #000;

This code creates a black box shadow that is positioned 10px from the top and left. (Note that I didn't have to specify the spread amount.)