HTML
    <div id="wrapper">
      <div class="logo chrome">
        <div class="part-1"></div>
        <div class="part-2"></div>
        <div class="part-3"></div>
        <div class="circle"></div>
        <div class="center"></div>
      </div>

      <div class="logo chrome canary">
        <div class="part-1"></div>
        <div class="part-2"></div>
        <div class="part-3"></div>
        <div class="circle"></div>
        <div class="center"></div>
      </div>

      <div class="logo chrome chromium">
        <div class="part-1"></div>
        <div class="part-2"></div>
        <div class="part-3"></div>
        <div class="circle"></div>
        <div class="center"></div>
      </div>
    </div>
    <section>
      
  <!-- START YouTube -->
  <article>
    <div id="youtube"></div>
  </article>
  <!-- END YouTube -->
  
  
  <!-- START Google Docs -->
  <article>
    <div id="docs">
      <span class="line" id="line1"></span>
      <span class="line" id="line2"></span>
      <span class="line" id="line3"></span>
      <span class="line" id="line4"></span>
    </div>
  </article>
  <!-- END Google Docs -->
  
  
  <!-- START Gmail -->
  <article>
    <div id="gmail">
      <span id="shadow"></span>
      <span id="top"></span>
      <span id="left"></span>
      <span id="right"></span>
    </div>
  </article>
  <!-- END Gmail -->
  
  
  <!-- START Google Drive -->
  <article>
    <div id="drive">
      <span id="yellow"></span>
      <span id="blue"></span>
      <span id="green"></span>
    </div>
  </article>
  <!-- END Google Drive -->
  
</section>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#wrapper {
  display: block;
  margin: 0 auto;
  max-width: 700px;
}
#wrapper > .logo {
  display: inline-block;
  margin: 20px 10px;
}

.logo.chrome {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  height: 210px;
  width: 210px;
  z-index: 1;
}
.logo.chrome .center {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background: #0d6cac;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #91c1e7), color-stop(100%, #0d6cac));
  background: -webkit-linear-gradient(top center, #91c1e7, #0d6cac);
  background: -moz-linear-gradient(top center, #91c1e7, #0d6cac);
  background: -o-linear-gradient(top center, #91c1e7, #0d6cac);
  background: linear-gradient(top center, #91c1e7, #0d6cac);
  position: absolute;
  top: 50%;
  left: 50%;
  height: 80px;
  width: 80px;
  margin-top: -41px;
  margin-left: -40px;
  border-bottom: solid 1px #125e90;
  z-index: 10;
}
.logo.chrome .circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  background: white;
  top: 50%;
  left: 50%;
  height: 94px;
  width: 94px;
  margin-top: -48px;
  margin-left: -47px;
  z-index: 5;
}
.logo.chrome .part-1 {
  background: #e93c35;
  position: absolute;
  top: 0;
  left: 34px;
  width: 200px;
  height: 58px;
}
.logo.chrome .part-1:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
  content: " ";
  background: #e93c35;
  position: absolute;
  top: 0;
  left: -91px;
  width: 200px;
  height: 58px;
}
.logo.chrome .part-2 {
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  background: #fdd901;
  position: absolute;
  top: 131px;
  left: 56px;
  width: 200px;
  height: 65px;
}
.logo.chrome .part-2:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
  content: " ";
  background: #fdd901;
  position: absolute;
  top: 0;
  left: -91px;
  width: 200px;
  height: 58px;
}
.logo.chrome .part-3 {
  -webkit-transform: rotate(-120deg);
  -moz-transform: rotate(-120deg);
  -ms-transform: rotate(-120deg);
  -o-transform: rotate(-120deg);
  transform: rotate(-120deg);
  background: #5bc15b;
  position: absolute;
  top: 88px;
  left: -74px;
  width: 200px;
  height: 65px;
}
.logo.chrome .part-3:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
  content: " ";
  background: #5bc15b;
  position: absolute;
  top: 0;
  left: -91px;
  width: 200px;
  height: 58px;
}
.logo.chrome.canary .center {
  background: #b88000;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efc948), color-stop(100%, #b88000));
  background: -webkit-linear-gradient(top center, #efc948, #b88000);
  background: -moz-linear-gradient(top center, #efc948, #b88000);
  background: -o-linear-gradient(top center, #efc948, #b88000);
  background: linear-gradient(top center, #efc948, #b88000);
  border-bottom-color: #e8b600;
}
.logo.chrome.canary .part-1, .logo.chrome.canary .part-1:after {
  background: #cb8f00;
}
.logo.chrome.canary .part-2, .logo.chrome.canary .part-2:after {
  background: #ecc21b;
}
.logo.chrome.canary .part-3, .logo.chrome.canary .part-3:after {
  background: #e0a600;
}
.logo.chrome.chromium .center {
  background: #3878bb;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9cbee4), color-stop(100%, #3878bb));
  background: -webkit-linear-gradient(top center, #9cbee4, #3878bb);
  background: -moz-linear-gradient(top center, #9cbee4, #3878bb);
  background: -o-linear-gradient(top center, #9cbee4, #3878bb);
  background: linear-gradient(top center, #9cbee4, #3878bb);
  border-bottom-color: #3878bb;
}
.logo.chrome.chromium .part-1, .logo.chrome.chromium .part-1:after {
  background: #4071a0;
}
.logo.chrome.chromium .part-2, .logo.chrome.chromium .part-2:after {
  background: #d0e2f1;
}
.logo.chrome.chromium .part-3, .logo.chrome.chromium .part-3:after {
  background: #89b7e1;
}
body {
  text-align: center;
}

section {
  display: table;
  margin: 120px auto;
  width: 800px;
}

section article {
  display: table-cell;
  width: 200px;
  vertical-align: bottom;
}

h3 {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
}

#youtube, #docs, #gmail, #drive {
  position: relative;
  margin: 0 auto;
}

/* YouTube */

#youtube {
  background: #de473c;
  border-radius: 14px / 21px;
  width: 100px;
  height: 70px;
}

#youtube:before {
  content: "";
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 28px solid #f3f1e7;
  width: 0; 
  height: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -18px 0 0 -12px;
}

/* Google Docs */

#docs {
  background: #2d74ec;
  border-radius: 8px 30px 8px 8px;
  width: 88px;
  height: 108px;
}

#docs:before {
  content: "";
  border-bottom: 13px solid #a0c3ff;
  border-top: 13px solid #fff;
  border-left: 13px solid #a0c3ff;
  border-right: 13px solid #fff;
  position: absolute;
  top: 0;
  right: 0;   
}

#docs:after {
  content: "";
  border-bottom: 13px solid transparent;
  border-top: 13px solid rgba(0, 0, 0, .3);
  border-left: 13px solid transparent;
  border-right: 13px solid rgba(0, 0, 0, .3);
  position: absolute;
  top: 26px;
  right: 0;   
}

#docs .line {
  background: #ebf2fe;
  display: block;
  width: 60px;
  height: 6px;
  margin: 0 14px;
  position: absolute;
  left: 0;
}

#docs #line1 {
  top: 35px;
}

#docs #line2 {
  top: 49px;
}

#docs #line3 {
  top: 63px;
}

#docs #line4 {
  top: 77px;
  width: 34px;
}

/* Gmail */

#gmail {
  background: #e24f43;
  border-radius: 7px;
  height: 78px;
  width: 108px;
  overflow: hidden;
  /* rounded corner fix */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

#gmail #top {
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-top: 33px solid #f1f0e5;
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  -webkit-backface-visibility: hidden;
}

#gmail #left {
  border-left: 40px solid #f1f0e5;
  border-top: 29px solid rgba(255, 255, 255, 0);
  border-bottom: 28px solid rgba(255, 255, 255, 0);
  content: "";
  display: block;
  position: absolute;
  left: 12px;
  bottom: 2px;
  z-index: 19;
}

#gmail:after {
  border-right: 42px solid rgba(255, 255, 255, 0);
  border-left: 42px solid #adaca2;
  border-top: 29px solid rgba(255, 255, 255, 0);
  border-bottom: 29px solid #adaca2;
  content: "";
  display: block;
  position: absolute;
  left: 12px;
  bottom: 0;
}

#gmail:before {
  border-left: 42px solid rgba(255, 255, 255, 0);
  border-right: 42px solid #f1f0e5;
  border-top: 29px solid rgba(255, 255, 255, 0);
  border-bottom: 29px solid #f1f0e5;
  content: "";
  display: block;
  position: absolute;
  left: 12px;
  bottom: 0;
  z-index: 9;
}

#gmail #shadow {
  content: "";
  display: block;
  border-left: 55px solid transparent;
  border-right: 55px solid rgba(0, 0, 0, .25);
  border-top: 37px solid transparent;
  border-bottom: 37px solid transparent;
  position: absolute;
  top: 12px;
  right: 0;
  z-index: 9;
}

/* Google Drive */

#drive {
  width: 112px;
  height: 96px;
}

#drive #yellow {
  background: #fdd04a;
  display: block;
  width: 39px;
  height: 62px;
  transform: skew(30deg);
  -webkit-transform: skew(30deg);
  position: absolute;
  top: 0;
  right: 19px;
  z-index: 9;
}

#drive #blue {
  background: #3f83f9;     
  display: block;
  width: 74px;
  height: 34px;
  transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  position: absolute;
  bottom: 0;
  right: 10px;
  z-index: 7;
}

#drive #green {
  background: #10a862;
  display: block;
  width: 38px;
  height: 96px;
  transform: skew(150deg);
  -webkit-transform: skew(150deg);
  position: absolute;
  top: 0;
  left: 9px;
  z-index: 8;
}

#drive #green:after {
  content: "";
  border-bottom: 40px solid #fff;
  border-right: 45px solid transparent;
  position: absolute;
  left: -6px;
  bottom: -1px;
} 
JavaScript

				

Recently Added

Social Icons

SCSS social icon with hover effect and active state.

Loader

SCSS loader fade in and fade out.

Keyboard

CSS keyboard with beautiful color and effect.

Randomize

Showing random numbers mixed up.

Buttons

Buttons with beautiful hover effect.

Glass Effect

Beautiful glass effect with css.

Clip Animation

Creating clip animation with css.

Google Icons

Google logos with css.

Abstract Art

Abstract art with pure css. Combination of shapes created with css.