Instagram Logo (Pure CSS)

HTML
<div class="instagram-logo"> <div class="camera"></div> </div>
CSS
.instagram-logo { width: 300px; height: 300px; border-radius: 24%; position: absolute; left: 50%; top: 50%; margin: -150px 0 0 -150px; box-shadow: -3px 6px 10px #ccc; background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%); } .camera { width: 200px; height: 200px; margin: 34px auto; position: relative; border: 18px solid #FFF; border-radius: 32%; } .camera:before { content: ""; width: 100px; height: 100px; float: left; margin: 38px 32px; border: 18px solid #FFF; border-radius: 50%; } .camera:after { content: ""; width: 30px; height: 30px; float: left; position: absolute; right: 22px; top: 20px; background: #FFF; border-radius: 50%; }
JAVASCRIPT
Expand for more options Login