<div id="vw-logo">
  <div id="blue-silver"></div>
    <div id="shadow-blue"></div>
    <div id="v"></div>
    <div id="w-left"></div>
    <div id="w-right"></div>
    <div id="extras"></div>
    <div id="shadow-fix"></div>
</div>
#vw-logo {
    height:298px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
    width:298px;
  background:#e0dcd9;
  margin-top:50px;
  border-radius:150px;
  -moz-border-radius:150px;
  -webkit-border-radius:150px;
  border:1px solid #707070;
  background-image: -moz-linear-gradient( top left, #e0dcd9 0%, #b7b9b4 63%, #a4a4a4 92%);
  background-image: -o-linear-gradient( top left, #e0dcd9 0%, #b7b9b4 63%, #a4a4a4 92%);
  background-image: -webkit-linear-gradient( top left, #e0dcd9 0%, #b7b9b4 63%, #a4a4a4 92%);
}

#vw-logo div {
    position:absolute;
}

#blue-silver {
  width:287px;
  height:287px;
  background:#6082bf;
  border-radius:143px;
  -moz-border-radius:143px;
  -webkit-border-radius:143px;
  top:5px;
  left:5px;
  border:1px solid #707070;
  background-image: -moz-linear-gradient( top left, #6b8bc6 0%, #6082bf 5%, #4a6cac 15%, #2a5297 32%, #1d346a 60%, #172651 90%, #131c45 95%);
  background-image: -o-linear-gradient( top left, #6b8bc6 0%, #6082bf 5%, #4a6cac 15%, #2a5297 32%, #1d346a 60%, #172651 90%, #131c45 95%);
  background-image: -webkit-linear-gradient( top left, #6b8bc6 0%, #6082bf 5%, #4a6cac 15%, #2a5297 32%, #1d346a 60%, #172651 90%, #131c45 95%);
}

#blue-silver:after {
  content:"";
  position:absolute;
  width:245px;
  height:245px;
  top:21px;
  left:21px;
  background:#ccc;
  border-radius:122px;
  -moz-border-radius:122px;
  -webkit-border-radius:122px;
  background-image: -moz-linear-gradient( top left, #fefefe 0%, #f5f7f6 50%, #d3d3d3 60%, #b0b0b0 75%, #9b9c97 90%);
  background-image: -o-linear-gradient( top left, #fefefe 0%, #f5f7f6 50%, #d3d3d3 60%, #b0b0b0 75%, #9b9c97 90%);
  background-image: -webkit-linear-gradient( top left, #fefefe 0%, #f5f7f6 50%, #d3d3d3 60%, #b0b0b0 75%, #9b9c97 90%);
  box-shadow: #150f31 5px 5px 5px;
  -moz-box-shadow: #150f31 5px 5px 5px;
  -webkit-box-shadow: #150f31 5px 5px 5px;
}

#shadow-blue {
  width:205px;
  height:205px;
  top:47px;
  left:47px;
  border-radius:102px;
  -moz-border-radius:102px;
  -webkit-border-radius:102px;
  background-image: -moz-linear-gradient( top left, #787c7f 0%, #8e8f93 30%, #adb0a9 40%, #eff2ff 45%, #fcfcfc 55%);
  background-image: -o-linear-gradient( top left, #787c7f 0%, #8e8f93 30%, #adb0a9 40%, #eff2ff 45%, #fcfcfc 55%);
  background-webkit: -o-linear-gradient( top left, #787c7f 0%, #8e8f93 30%, #adb0a9 40%, #eff2ff 45%, #fcfcfc 55%);
}

#shadow-blue:after {
  content:"";
  position:absolute;
  width:201px;
  height:201px;
  top:2px;
  left:2px;
  border-radius:102px;
  background:#385e9f;
  -moz-border-radius:102px;
  -webkit-border-radius:102px;
  background-image:-moz-radial-gradient( 35% 35%, #a7bfe3 0%, #7b9ccf 20%, #5a7cb9 40%, #385e9f 60%, #234a8b 80%, #1e3c7a 90%);
  background-image:-webkit-radial-gradient( 35% 35%, #a7bfe3 0%, #7b9ccf 20%, #5a7cb9 40%, #385e9f 60%, #234a8b 80%, #1e3c7a 90%);
  box-shadow:inset 5px 4px 5px #2c3447;
  -moz-box-shadow:inset 5px 4px 5px #2c3447;
  -webkit-box-shadow:inset 5px 4px 5px #2c3447;
}

#v {
  width:33px;
  height:27px;
  background:#fff;
  top:120px;
  left:133px;
  box-shadow:7px 7px 8px #2c3447;
  -moz-box-shadow:7px 7px 8px #2c3447;
  -webkit-box-shadow:7px 7px 8px #2c3447;
}

#v:before {
  content:"";
  position:absolute;
  width:27px;
  height:94px;
  background:#fefefe;
  left:-21px;
  top:-68px;
  -moz-transform:rotate(-24deg);
  -webkit-transform:rotate(-24deg);
  -o-transform:rotate(-24deg);
  box-shadow:8px 0px 5px -5px #2c3447;
  -moz-box-shadow:8px 0px 5px -5px #2c3447;
  -webkit-box-shadow:8px 0px 5px -5px #2c3447;
}

#v:after {
  content:"";
  position:absolute;
  width:27px;
  height:94px;
  background:#fff;
  left:27px;
  top:-68px;
  -moz-transform:rotate(24deg);
  -o-transform:rotate(24deg);
  -webkit-transform:rotate(24deg);
  box-shadow:8px 0px 5px -5px #2c3447;
  -moz-box-shadow:8px 0px 5px -5px #2c3447;
  -webkit-box-shadow:8px 0px 5px -5px #2c3447;
  background-image: -moz-linear-gradient( top left, #f6f8f7 0%, #fefefe 50%);
  background-image: -o-linear-gradient( top left, #f6f8f7 0%, #fefefe 50%);
  background-image: -webkit-linear-gradient( top left, #f6f8f7 0%, #fefefe 50%);
}

#w-left {
  height:158px;
  width:24px;
  background:#fff;
  left:74px;
  top:90px;
  -moz-transform:rotate(-24deg);
  -o-transform:rotate(-24deg);
  -webkit-transform:rotate(-24deg);
  box-shadow:8px 0px 5px -5px #2c3447;
  -moz-box-shadow:8px 0px 5px -5px #2c3447;
  -webkit-box-shadow:8px 0px 5px -5px #2c3447;
  background-image: -moz-linear-gradient( top, #fafbfa 0%, #eaeaea 70%, #cfcfcf 95%);
  background-image: -o-linear-gradient( top, #fafbfa 0%, #eaeaea 70%, #cfcfcf 95%);
  background-image: -webkit-linear-gradient( top, #fafbfa 0%, #eaeaea 70%, #cfcfcf 95%);
}

#w-left:after {
  content:"";
  position:absolute;
  height:80px;
  width:27px;
  background:#fff;
  left:26px;
  top:85px;
  -moz-transform:rotate(48deg);
  -o-transform:rotate(48deg);
  -webkit-transform:rotate(48deg);
  box-shadow:8px 0px 5px -5px #2c3447;
  -moz-box-shadow:8px 0px 5px -5px #2c3447;
  -webkit-box-shadow:8px 0px 5px -5px #2c3447;
  background-image: -moz-linear-gradient( top, #fefefe 0%, #eaeaea 60%, #cfcfcf 90%);
  background-image: -o-linear-gradient( top, #fefefe 0%, #eaeaea 60%, #cfcfcf 90%);
  background-image: -webkit-linear-gradient( top, #fefefe 0%, #eaeaea 60%, #cfcfcf 90%);
}

#w-right {
  height:158px;
  width:24px;
  background:#fff;
  right:73px;
  top:90px;
  -moz-transform:rotate(24deg);
  -o-transform:rotate(24deg);
  -webkit-transform:rotate(24deg);
  box-shadow:8px 0px 5px -5px #2c3447;
  -moz-box-shadow:8px 0px 5px -5px #2c3447;
  -webkit-box-shadow:8px 0px 5px -5px #2c3447;
  background-image: -moz-linear-gradient( top, #d4d4d4 0%, #d6d6d6 40%, #bcbcbc 60%, #ababaa 70%);
  background-image: -o-linear-gradient( top, #d4d4d4 0%, #d6d6d6 40%, #bcbcbc 60%, #ababaa 70%);
  background-image: -webkit-linear-gradient( top, #d4d4d4 0%, #d6d6d6 40%, #bcbcbc 60%, #ababaa 70%);
}

#w-right:after {
  content:"";
  position:absolute;
  height:80px;
  width:27px;
  background:#fff;
  right:26px;
  top:85px;
  -o-transform:rotate(-48deg);
  -moz-transform:rotate(-48deg);
  -webkit-transform:rotate(-48deg);
  box-shadow:8px 0px 5px -5px #2c3447;
  -webkit-box-shadow:8px 0px 5px -5px #2c3447;
  -moz-box-shadow:8px 0px 5px -5px #2c3447;
  background-image: -moz-linear-gradient( top, #fefefe 0%, #d6d6d6 50%, #bcbcbc 60%, #ababaa 70%);
  background-image: -o-linear-gradient( top, #fefefe 0%, #d6d6d6 50%, #bcbcbc 60%, #ababaa 70%);
  background-image: -webkit-linear-gradient( top, #fefefe 0%, #d6d6d6 50%, #bcbcbc 60%, #ababaa 70%);
}

#extras {
  width:31px;
  height:7px;
  background:#fefefe;
  top:158px;
  left:134px;
}

#extras:before {
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  background:#cfcfcf ;
  top:70px;
  left:-27px;
  -moz-transform:rotate(24deg);
  -o-transform:rotate(24deg);
  -webkit-transform:rotate(24deg);
}

#extras:after {
  content:"";
  position:absolute;
  width:20px;
  height:25px;
  background:#ababaa;
  top:70px;
  left:39px;
  -moz-transform:rotate(-24deg);
  -o-transform:rotate(-24deg);
  -webkit-transform:rotate(-24deg);
}

#shadow-fix {
  width:24px;
  height:30px;
  background:#ababaa;
  top:195px;
  left:183px;
  -moz-transform:rotate(24deg);
  -o-transform:rotate(24deg);
  -webkit-transform:rotate(24deg);
}

#shadow-fix:after {
  content:"";
  position:absolute;
  width:10px;
  height:27px;
  background:#c4c4c4;
  top:-109px;
  left:22px;
  background-image: -moz-linear-gradient( left, #d4d4d4 0%, #c4c4c4 90%);
  background-image: -o-linear-gradient( left, #d4d4d4 0%, #c4c4c4 90%);
  background-image: -webkit-linear-gradient( left, #d4d4d4 0%, #c4c4c4 90%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.