Box-shadow - top and left only - html

Question

<div class="myContainer">
Some text...
</div>
Now I only want on the left side and the top of the element a box-shadow.
How can I do this?
I tried this:
.myContainer {
box-shadow: 10px 10px 5px #888888;
}
But this doesn't work.

Answer 1

Like this, See fiddle: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/25/
1st number - is the horizontal position (negative is left, positive right)
2nd number - is the vertical position (negative is up, positive down)
3rd number - is the blur radius
4th number - is spread radius
-webkit-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
HTML
<div class="someDiv"></div>
CSS
.someDiv {
width: 400px;
height: 400px;
background-color: lightblue;
margin-left: 50px;
margin-top: 50px;
-webkit-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
}

Answer 2

This should work :
div
{
width:400px;
height:400px;
left:45px;
box-shadow:-10px -5px 4px #ccc;
}

Answer 3

You can use negative values for the positioning.
box-shadow: -10px -10px 5px 0px #888888;
Use a CSS3 generator to try it out, like this one
Remember to also include the vendor specific prefixes to ensure cross browser compatibility.
-webkit-box-shadow: -10px -10px 5px 0px #888888;
-moz-box-shadow: -10px -10px 5px 0px #888888;
You can check it out with this jsfiddle
If you want to know more about the box-shadow property, then check out MDN box-shadow

Answer 4

Try this
div{
width:200px;
height:200px;
background-color:red;
margin:50px;
box-shadow:-10px -5px 4px #ccc;
}
<div></div>