<div id="batman-logo">
  <div id="left-white"></div>
  <div id="right-white"></div>
    <div id="top-white"></div>
    <div id="lighting"></div>
</div>
#batman-logo {
    height:136px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
    width:500px;
  background:#000;
  margin-top:50px;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    right top,
    color-stop(0, rgb(72,84,92)),
    color-stop(0.63, rgb(25,26,26)),
    color-stop(0.86, rgb(26,26,26)));
  background-image: -moz-linear-gradient(   /* Remember Browser specific prefixes! */
    left bottom,  /* Gradient start point (the angle) */
    rgb(72,84,92) 0%,   /* First colour and start point */
    rgb(25,26,26) 63%,  /* Second colour and start point */
    rgb(26,26,26) 86%);   /*Third colour and start point */
  background-image: -o-linear-gradient(
    left bottom,
    rgb(72,84,92) 0%,
    rgb(25,26,26) 63%,
    rgb(26,26,26) 86%);
}

#batman-logo div {
    position:absolute;
}

#left-white {
  background:#fff;
  border-radius:100px 160px 30px 50px / 80px 100px 50px 50px;
  width:230px;
  height:80px;
  top:-1px;
  left:-158px;
}

#left-white:after {
  content:"";
  position:absolute;
  background:#fff;
  width:333px;
  height:220px;
  border-radius:0px 400px 400px 400px / 0px 300px 300px 300px;
  top:73px;
  left:88px;
}

#right-white {
  background:#fff;
  border-radius:160px 100px 50px 30px / 100px 80px 50px 50px;
  width:230px;
  height:80px;
  top:-1px;
  right:-158px;
}

#right-white:after {
  content:"";
  position:absolute;
  background:#fff;
  width:383px;
  height:220px;
  border-radius:400px 0px 400px 400px / 300px 0px 300px 300px;
  top:73px;
  right:38px;
}

#top-white {
  width:12px;
  top:0px;
  left:228px;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:20px solid #fff;
}

#top-white:before {
  content:"";
  position:absolute;
  width:65px;
  height:77px;
  background:#fff;
  border-radius:30px 10px 10px 30px / 80px 50px 50px 50px;
  top:-65px;
  right:18px;
  -moz-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -o-transform:rotate(5deg);
}

#top-white:after {
  content:"";
  position:absolute;
  width:65px;
  height:77px;
  background:#fff;
  border-radius:10px 30px 30px 10px / 50px 80px 50px 50px;
  top:-65px;
  left:18px;
  -moz-transform:rotate(-5deg);
  -webkit-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
}

#lighting {
  width:150px;
  height:150px;
  background:#fff;
  border-radius:75px;
  left:100px;
  top:-10px;
  opacity:0.02;
  box-shadow: #fff 0 0 70px;
  -webkit-box-shadow: #fff 0 0 70px;
  -moz-box-shadow: #fff 0 0 70px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.