*FontAwesome is required - fontawesome.com
(version 4.x was used in this example, if using version 5 the classes will have to be updated - https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4)

/*Official Colors for Social Icons*/
.fa-twitter {
background: #14bbf2;
}
.fa-pinterest-p {
background: #f22a39;
}
.fa-facebook-f {
background: #3f5997;
}
.fa-youtube {
background: #fe2316;
}
.fa-instagram {
background:
radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%),
radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%),
radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),
radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}

 

EX:

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.