How to create Instagram Logo Using HTML CSS? | Code With Random

Hello, guys welcome to Code With Random blog, today we will learn about How To Create An Instagram Logo In HTML & CSS. We have used only the div tag in HTML and Rest have been done In CSS. We will use pure CSS to make this logo.

In CSS We have used :: before and :: after pseudo-elements for circles. Hope You will enjoy it!

1. Create Two Divs 

 <div class="insta">  
     <div class="innerbox">  
     </div>  
   </div>  

 /* Css reset */  
 * {  
   margin: 0;  
   padding: 0;  
   box-sizing: border-box;  
 }  
 /* centering the insta logo */  
 body {  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   width: 100vw;  
   height: 100vh;  
   overflow: hidden;  
 }  

We will first do a CSS reset and center our content vertically and horizontally. 

 /* main box of insta */  
 .insta {  
   width: 150px;  
   height: 150px;  
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);  
   border-radius: 35px;  
   display: grid;  
   place-items: center;  
 }  

 /* innerbox in insta box */  
 .innerbox {  
   width: 120px;  
   height: 120px;  
   border: 10px solid #fff;  
   border-radius: 32px;  
   display: grid;  
   place-items: center;  
   position: relative;  
 }  

We have given our logo the inner border!

Output

5. Circles Of Logo With: before and: after  

 /* center circle of insta */  
 .innerbox::before {  
   content: '';  
   width: 45px;  
   height: 45px;  
   border: 10px solid #fff;  
   border-radius: 50%;  
   background: transparent;  
   position: absolute;  
 }  
 /* top right circle of insta */  
 .innerbox::after {  
   content: '';  
   width: 10px;  
   height: 10px;  
   border: 2px solid #fff;  
   border-radius: 50%;  
   background: #fff;  
   position: absolute;  
   top: 8px;  
   right: 10px;  
 }  

Final Output

You can try the live example of this project below: