The new Instagram logo create by CSS gradient. Read more about Gradient here

Instagram logo CSS and HTML

Method – 1

instagram logo css vector
instagram logo css vector

logo.html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn. com/font-awesome/4.3.0/css/font-awesome.min.css">
<span class="instagram">
  <span class="fa fa-instagram"></span>
</span>

style.css


.instagram {
display: inline-block;
width: 250px;
height: 250px;
text-align: center;
border-radius: 40px;
color: #fff;
font-size: 220px;
line-height: 250px;
vertical-align: middle;
background: #d6249f;
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
box-shadow: 0px 3px 10px rgba(0,0,0,.25);
}

 

Instagram logo CSS Gradient
Instagram logo CSS Gradient

Method – 2

 

logo.html


<link href="https://cdnjs.cloudflare. com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<i class="fa fa-instagram" id="insta" aria-hidden="true"></i>

style.css

#insta {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
          /* Also define standard property for compatibility */
          background-clip: text;
  -webkit-text-fill-color: transparent;
  
  font-size: 200px; /* change this to change the size*/
  
}

Search terms

  • instagram background color code,
  • instagram gradient css font awesome,
  • instagram logo codepen,
  • instagram color gradient hex,
  • instagram gradient color code css,
  • instagram favicon,
  • font awesome instagram color,
  • instagram white background color code,