The new Instagram logo create by CSS gradient. Read more about Gradient here
Instagram logo CSS and HTML
Method – 1
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);
}
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,
