style.css

/*
 * Overview: The new instagram logo
 * Author: mittya
 * Code: https://github.com/mittya/css-instagram-logo
 */

body {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #d6d6d6 25%, transparent 25%, transparent 75%, #d6d6d6 75%, #d6d6d6),
    linear-gradient(45deg, #d6d6d6 25%, transparent 25%, transparent 75%, #d6d6d6 75%, #d6d6d6);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px
}

div {
  box-sizing: border-box;
}

.instagram {
  position: relative;
  width: 512px;
  height: 512px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem;
  border-radius: 110px;
  box-shadow: 0 38px 70px rgba(0,0,0,.15);

  background: linear-gradient(
    39deg,
    rgba(255,188,65,1) 0%,
    rgba(193,41,166,1) 18%,
    rgba(221,40,125,1) 63%,
    rgba(147,28,156,1) 89%,
    rgba(155,26,183,1) 100%
  );
}

.purple {
  position: absolute;
  left: 0;
  top: 0;
  width: 512px;
  height: 512px;
  border-radius: 90px;

  background: linear-gradient(
    158deg,
    rgba(61, 79, 208,1) 0%,
    rgba(118,91,195,.8) 18%,
    rgba(190, 76, 230,.5) 30%,
    rgba(212, 59, 202,.56) 35%,
    rgba(218,45,125,0) 82%
  );
}

.red {
  position: absolute;
  left: -230px;
  bottom: -220px;
  width: 800px;
  height: 550px;
  border-radius: 800px / 550px;

  background: radial-gradient(
    ellipse closest-side,
    rgba(251,77,49,1) 0%,
    rgba(241,75,49,.5) 45%,
    rgba(239,71,44,.15) 75%,
    rgba(239,71,44,0) 100%
  );
}

.orange {
  position: absolute;
  left: -170px;
  bottom: -110px;
  width: 650px;
  height: 450px;

  background: radial-gradient(
    ellipse closest-side,
    rgb(220, 135, 30) 0%,
    rgba(247, 159, 51, 0.5) 40%,
    rgba(247, 170, 76, 0.3) 60%,
    rgba(255, 191, 57, 0) 100%
  );
}

.yellow {
  position: absolute;
  left: -70px;
  bottom: -195px;
  width: 470px;
  height: 350px;

  background: radial-gradient(
    ellipse closest-side,
    rgba(247,236,108,1) 0%,
    rgba(247,236,108,.4) 60%,
    rgba(254,236,115,0) 100%
  );
}

.border {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 380px;
  height: 380px;
  margin-left: -190px;
  margin-top: -190px;
  border: 35px solid #fff;
  border-radius: 120px;
  box-shadow: 0 3px 10px rgba(0,0,0,.1), inset 0 6px 10px rgba(0,0,0,.1);
}

.cirlce {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 198px;
  height: 198px;
  margin-left: -99px;
  margin-top: -99px;
  border: 35px solid #fff;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0,0,0,.1), inset 0 6px 10px rgba(0,0,0,.1);
}

.dot {
  position: absolute;
  left: 330px;
  top: 130px;
  width: 46px;
  height: 46px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
}