<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;
border-radius:150px;
border-radius:150px;
border:1px solid #707070;
background-image: linear-gradient( top left, #e0dcd9 0%, #b7b9b4 63%, #a4a4a4 92%);
background-image: linear-gradient( top left, #e0dcd9 0%, #b7b9b4 63%, #a4a4a4 92%);
background-image: 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;
border-radius:143px;
border-radius:143px;
top:5px;
left:5px;
border:1px solid #707070;
background-image: linear-gradient( top left, #6b8bc6 0%, #6082bf 5%, #4a6cac 15%, #2a5297 32%, #1d346a 60%, #172651 90%, #131c45 95%);
background-image: linear-gradient( top left, #6b8bc6 0%, #6082bf 5%, #4a6cac 15%, #2a5297 32%, #1d346a 60%, #172651 90%, #131c45 95%);
background-image: 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;
border-radius:122px;
border-radius:122px;
background-image: linear-gradient( top left, #fefefe 0%, #f5f7f6 50%, #d3d3d3 60%, #b0b0b0 75%, #9b9c97 90%);
background-image: linear-gradient( top left, #fefefe 0%, #f5f7f6 50%, #d3d3d3 60%, #b0b0b0 75%, #9b9c97 90%);
background-image: linear-gradient( top left, #fefefe 0%, #f5f7f6 50%, #d3d3d3 60%, #b0b0b0 75%, #9b9c97 90%);
box-shadow: #150f31 5px 5px 5px;
box-shadow: #150f31 5px 5px 5px;
box-shadow: #150f31 5px 5px 5px;
}
#shadow-blue {
width:205px;
height:205px;
top:47px;
left:47px;
border-radius:102px;
border-radius:102px;
border-radius:102px;
background-image: linear-gradient( top left, #787c7f 0%, #8e8f93 30%, #adb0a9 40%, #eff2ff 45%, #fcfcfc 55%);
background-image: linear-gradient( top left, #787c7f 0%, #8e8f93 30%, #adb0a9 40%, #eff2ff 45%, #fcfcfc 55%);
background-webkit: 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;
border-radius:102px;
border-radius:102px;
background-image:radial-gradient( 35% 35%, #a7bfe3 0%, #7b9ccf 20%, #5a7cb9 40%, #385e9f 60%, #234a8b 80%, #1e3c7a 90%);
background-image:radial-gradient( 35% 35%, #a7bfe3 0%, #7b9ccf 20%, #5a7cb9 40%, #385e9f 60%, #234a8b 80%, #1e3c7a 90%);
box-shadow:inset 5px 4px 5px #2c3447;
box-shadow:inset 5px 4px 5px #2c3447;
box-shadow:inset 5px 4px 5px #2c3447;
}
#v {
width:33px;
height:27px;
background:#fff;
top:120px;
left:133px;
box-shadow:7px 7px 8px #2c3447;
box-shadow:7px 7px 8px #2c3447;
box-shadow:7px 7px 8px #2c3447;
}
#v:before {
content:"";
position:absolute;
width:27px;
height:94px;
background:#fefefe;
left:-21px;
top:-68px;
transform:rotate(-24deg);
transform:rotate(-24deg);
transform:rotate(-24deg);
box-shadow:8px 0px 5px -5px #2c3447;
box-shadow:8px 0px 5px -5px #2c3447;
box-shadow:8px 0px 5px -5px #2c3447;
}
#v:after {
content:"";
position:absolute;
width:27px;
height:94px;
background:#fff;
left:27px;
top:-68px;
transform:rotate(24deg);
transform:rotate(24deg);
transform:rotate(24deg);
box-shadow:8px 0px 5px -5px #2c3447;
box-shadow:8px 0px 5px -5px #2c3447;
box-shadow:8px 0px 5px -5px #2c3447;
background-image: linear-gradient( top left, #f6f8f7 0%, #fefefe 50%);
background-image: linear-gradient( top left, #f6f8f7 0%, #fefefe 50%);
background-image: linear-gradient( top left, #f6f8f7 0%, #fefefe 50%);
}
#w-left {
height:158px;
width:24px;
background:#fff;
left:74px;
top:90px;
transform:rotate(-24deg);
transform:rotate(-24deg);
transform:rotate(-24deg);
box-shadow:8px 0px 5px -5px #2c3447;
box-shadow:8px 0px 5px -5px #2c3447;
box-shadow:8px 0px 5px -5px #2c3447;
background-image: linear-gradient( top, #fafbfa 0%, #eaeaea 70%, #cfcfcf 95%);
background-image: linear-gradient( top, #fafbfa 0%, #eaeaea 70%, #cfcfcf 95%);
background-image: 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;
transform:rotate(48deg);
transform:rotate(48deg);
transform:rotate(48deg);
box-shadow:8px 0px 5px -5px #2c3447;
box-shadow:8px 0px 5px -5px #2c3447;
box-shadow:8px 0px 5px -5px #2c3447;
background-image: linear-gradient( top, #fefefe 0%, #eaeaea 60%, #cfcfcf 90%);
background-image: linear-gradient( top, #fefefe 0%, #eaeaea 60%, #cfcfcf 90%);
background-image: linear-gradient( top, #fefefe 0%, #eaeaea 60%, #cfcfcf 90%);
}
#w-right {
height:158px;
width:24px;
background:#fff;
right:73px;
top:90px;
transform:rotate(24deg);
transform:rotate(24deg);
transform:rotate(24deg);
box-shadow:8px 0px 5px -5px #2c3447;
box-shadow:8px 0px 5px -5px #2c3447;
box-shadow:8px 0px 5px -5px #2c3447;
background-image: linear-gradient( top, #d4d4d4 0%, #d6d6d6 40%, #bcbcbc 60%, #ababaa 70%);
background-image: linear-gradient( top, #d4d4d4 0%, #d6d6d6 40%, #bcbcbc 60%, #ababaa 70%);
background-image: 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;
transform:rotate(-48deg);
transform:rotate(-48deg);
transform:rotate(-48deg);
box-shadow:8px 0px 5px -5px #2c3447;
box-shadow:8px 0px 5px -5px #2c3447;
box-shadow:8px 0px 5px -5px #2c3447;
background-image: linear-gradient( top, #fefefe 0%, #d6d6d6 50%, #bcbcbc 60%, #ababaa 70%);
background-image: linear-gradient( top, #fefefe 0%, #d6d6d6 50%, #bcbcbc 60%, #ababaa 70%);
background-image: 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;
transform:rotate(24deg);
transform:rotate(24deg);
transform:rotate(24deg);
}
#extras:after {
content:"";
position:absolute;
width:20px;
height:25px;
background:#ababaa;
top:70px;
left:39px;
transform:rotate(-24deg);
transform:rotate(-24deg);
transform:rotate(-24deg);
}
#shadow-fix {
width:24px;
height:30px;
background:#ababaa;
top:195px;
left:183px;
transform:rotate(24deg);
transform:rotate(24deg);
transform:rotate(24deg);
}
#shadow-fix:after {
content:"";
position:absolute;
width:10px;
height:27px;
background:#c4c4c4;
top:-109px;
left:22px;
background-image: linear-gradient( left, #d4d4d4 0%, #c4c4c4 90%);
background-image: linear-gradient( left, #d4d4d4 0%, #c4c4c4 90%);
background-image: linear-gradient( left, #d4d4d4 0%, #c4c4c4 90%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.