<div class="boxy-banner-back"></div>
<div class="boxy">
    
    <div class="boxy-banner">
      
      <p>Woot! I'm a Banner!</p>
    </div>
</div>
body{ background: #333;}
.boxy {
    background: #f4f6f7;
    background: -moz-linear-gradient(top, #f4f6f7 1%, #fcfcfc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #f4f6f7), color-stop(100%, #fcfcfc));
    background: -webkit-linear-gradient(top, #f4f6f7 1%, #fcfcfc 100%);
    background: -o-linear-gradient(top, #f4f6f7 1%, #fcfcfc 100%);
    background: -ms-linear-gradient(top, #f4f6f7 1%, #fcfcfc 100%);
    background: linear-gradient(to bottom, #f4f6f7 1%, #fcfcfc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f6f7', endColorstr='#fcfcfc', GradientType=0);
    width: 300px;
    height: 100px;
    border: 2px solid #F3F3F3;
    margin-left: 200px;
    margin-top: 20px;
    position: relative;
}
.boxy-banner-back {
    background: #34588A;
    z-index: -20;
    position: absolute;
    width: 320px;
    height: 50px;
    top: 37px;
    left: 200px;
    border-radius: 4px;
   
}
.boxy-banner {
    background: #5d8fb7;
    background: -moz-linear-gradient(top, #5d8fb7 1%, #4272b5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #5d8fb7), color-stop(100%, #4272b5));
    background: -webkit-linear-gradient(top, #5d8fb7 1%, #4272b5 100%);
    background: -o-linear-gradient(top, #5d8fb7 1%, #4272b5 100%);
    background: -ms-linear-gradient(top, #5d8fb7 1%, #4272b5 100%);
    background: linear-gradient(to bottom, #5d8fb7 1%, #4272b5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d8fb7', endColorstr='#4272b5', GradientType=0);
    position: absolute;
    width: 320px;
    height: 50px;
    top: 10px;
    left: -10px;
    box-shadow:  0 10px 4px -6px rgba(0,0,0, .2);
  border-radius: 4px 4px 0 0;
}
.boxy-banner p{
  text-align: center;
  color: white;
  font-family: arial;
  font-size: 18px;
  line-height: 18px;  
  font-weight: bold;
  text-shadow: -2px 2px 2px rgba(0,0,0, .2);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.