shadow-hump

by Nic Fontaine

HTML

<header class='shadow-hump'>
</header>

CSS

body { margin: 0; background: #eee; }

header {
  position: relative;
  height: 30px;
  background: #fff;
  /* z-index: 2; */
}

.shadow-hump:before {
  position: absolute;
  content: "";
  height: 30%;
  border-radius: 50%;
  background-color: rgba(28,31,42,.09);
  bottom: 0;
  left: 0; right: 0;
  transform: translateY(50%);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
  z-index: -1;
 }