Css box shadow moving to the top and left - html

Question

CSS & Html:
body {background:#ccc}
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect3
{
position: relative;
}
.effect3:before
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
<div class="box effect3">
<h3>Effect 3</h3>
</div>
I am trying to decorate a box with a shadow.
The above css is for the shadow bottom and left (in the red circle).
What can be the css to apply to the top and left (red arrow)?

Answer 1

Please use these code for top left box-shadow:
.effect3:before {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 3px;
width: 18%;
top: 24px;
max-width: 300px;
background: #777;
-webkit-box-shadow: -8px 15px 10px #777;
-moz-box-shadow: -8px 15px 10px #777;
-webkit-transform: rotate(87deg);
-moz-transform: rotate(87deg);
transform: rotate(87deg);
}

Answer 2

body {
background: #ccc
}
.box h3 {
text-align: center;
position: relative;
top: 80px;
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.effect3 {
position: relative;
}
.effect3:before {
z-index: -1;
position: absolute;
content: "";
left: -46px;
width: 20%;
bottom: 15px;
top: 25%;
max-width: 300px;
height: 20px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: -10px -5px 10px #777;
-webkit-transform: rotate(-93deg);
-moz-transform: rotate(-93deg);
-o-transform: rotate(-93deg);
-ms-transform: rotate(-93deg);
transform: rotate(-93deg);
}
I think this is what you asking...

Answer 3

-webkit-box-shadow: -6px -8px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -6px -8px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: -6px -8px 5px 0px rgba(50, 50, 50, 0.75);
Generated using http://css3gen.com/box-shadow/

Answer 4

Use an after and changing the before like so:
.effect3:before {
z-index: -1;
position: absolute;
content: "";
left: 15px;
width: 50%;
bottom: 15px;
top: 4%;
max-width: 300px;
height: 20px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: -10px -5px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(3deg);
}
.effect3:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
Here is the JSFiddle demo