Instagram Logo

In this example below you will see how to do a Instagram Logo with some HTML / CSS and Javascript

Recreating the Instagram logo in CSS

Thumbnail
This awesome code was written by heatherduvall, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright heatherduvall ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Instagram Logo</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="instagram"><span></span></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/heatherduvall/instagram-logo-aNxZXX */
body {
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.instagram {
  position: relative;
  margin: 0 auto;
  width: 250px;
  height: 250px;
  align-self: center;
  border-radius: 55px;
  background: radial-gradient(circle at 30% 110%, #ffdb8b 0%, #ee653d 25%, #d42e81 50%, #a237b6 75%, #3e5fbc 100%);
  box-shadow: 0 15px 40px 1px rgba(0, 0, 0, 0.3);
}
.instagram span {
  display: block;
  border: 15px solid #fff;
  width: 150px;
  height: 150px;
  border-radius: 55px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.instagram span:before, .instagram span:after {
  content: "";
  position: absolute;
}
.instagram span:before {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 15px solid #fff;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.instagram span:after {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  top: 16px;
  right: 16px;
}

Comments