Edit in JSFiddle

<header>
  <label>desired</label>
  <div class="logo multi-shadow">
    &
  </div>
</header>

<p>The first <code>.logo</code> element uses multiple box-shadows to cover the shadow inside the white header area.</p>

<header>
    <label>default</label>
  <div class="logo">
    &
  </div>
</header>


<header style="margin-top: 150px">
  <div class="logo multi-red-shadow">
    &
  </div>
</header>

header, .logo {
    -webkit-box-shadow: 0px 1px 15px rgba(0,0,0,0.3);
       -moz-box-shadow: 0px 1px 15px rgba(0,0,0,0.3);
        -ms-box-shadow: 0px 1px 15px rgba(0,0,0,0.3);
         -o-box-shadow: 0px 1px 15px rgba(0,0,0,0.3);
            box-shadow: 0px 1px 15px rgba(0,0,0,0.3);
}

.logo.multi-shadow {
    -webkit-box-shadow: 10px -50px 0 #fff,
                       -10px -50px 0 #fff,
                         0px 1px 15px rgba(0,0,0,0.3);
    
    -moz-box-shadow: 10px -50px 0 #fff,
                       -10px -50px 0 #fff,
                         0px 1px 15px rgba(0,0,0,0.3);
    
    -ms-box-shadow: 10px -50px 0 #fff,
                   -10px -50px 0 #fff,
                     0px 1px 15px rgba(0,0,0,0.3);
    
    -o-box-shadow: 10px -50px 0 #fff,
                  -10px -50px 0 #fff,
                    0px 1px 15px rgba(0,0,0,0.3);
    
    box-shadow: 10px -50px 0 #fff,
               -10px -50px 0 #fff,
                 0px 1px 15px rgba(0,0,0,0.3);
}

.logo.multi-red-shadow {
    -webkit-box-shadow: 10px -50px 0 #a00,
                       -10px -50px 0 #a00,
                         0px 1px 15px rgba(0,0,0,0.3);
    
    -moz-box-shadow: 10px -50px 0 #a00,
                       -10px -50px 0 #a00,
                         0px 1px 15px rgba(0,0,0,0.3);
    
    -ms-box-shadow: 10px -50px 0 #a00,
                   -10px -50px 0 #a00,
                     0px 1px 15px rgba(0,0,0,0.3);
    
    -o-box-shadow: 10px -50px 0 #a00,
                  -10px -50px 0 #a00,
                    0px 1px 15px rgba(0,0,0,0.3);
    
    box-shadow: 10px -50px 0 #a00,
               -10px -50px 0 #a00,
                 0px 1px 15px rgba(0,0,0,0.3);
}

/******/


* { margin: 0; padding: 0; }

body { background: #f0f0f0; }

header {
    position: relative;
    height: 50px; margin-bottom: 80px;
    background: #fff;
}


label {
    position: absolute; top: 10px; left: 10px;
    color: #bbb;
}

.logo {
    height: 80px; width: 80px; padding: 10px;
    margin: 0 auto;
    background: #fff;
}

.logo, p {
    text-align: center; font-family: Palatino, 'Palatino Linotype', Georgia;
}

p { width: 25em; margin: 0 auto 20px; }
.logo { font-size: 90px; }