Box-Shadow on 3 sides of a div (not on the right side)

Question

I've seen this post and after multiples attempts to modify the code by the top answer I am still unable to convert it from box-shadow Left/Bottom/Right to Top/Left/Bottom.

This is the Fiddle :

#shadowBox {
    background-color: #ddd;
    margin: 0px auto;
    padding: 10px;
    width: 220px;
    box-shadow: 0px 8px 0 gray, 
        -10px 8px 0 gray, 10px 8px 0 gray;
}

<br/><br/>
<div id="shadowBox">Test</div>

How can I do that ? I don't understand how this works and manuals don't go further than the classic border-box...

What did you tried .... Don't only refer link along with that please also provide what did you tried till now? — Moumit, Sep 16 '16 at 11:04
#shadowBox { background-color: #ddd; margin: 0px auto; padding: 10px; width: 220px; box-shadow: -10px 10px 0 gray, -10px -10px 0 gray, -10px 0px 0 gray; } — JeetDaloneboy, Sep 16 '16 at 11:20

score 1 · Answer 1 · answered Sep 16 '16 at 11:07

1

You mean sth like this? i can recommend you a page: cssmatic.com

-webkit-box-shadow: -20px 4px 30px 0px rgba(0,0,0,0.61);
-moz-box-shadow: -20px 4px 30px 0px rgba(0,0,0,0.61);
box-shadow: -20px 4px 30px 0px rgba(0,0,0,0.61);

answered Sep 16 '16 at 11:07

Zbigniew Malcherczyk

152
17

score 0 · Accepted Answer · answered Sep 16 '16 at 11:14

HTML

<br/><br/>
<div id="shadowBox">Test</div>

CSS: Top/Left/Bottom

  #shadowBox {
      background-color: #ddd;
      margin: 0px auto;
      padding: 10px;
      width: 220px;
      box-shadow: -10px -10px 10px gray, 
          -10px 0px 10px gray, -10px 10px 10px gray;
  }

Box-Shadow on 3 sides of a div (not on the right side)

2 Answers2