English, Front end development, Web developmentTagged , , ,

Instagram’s New Logo: How do CSS enthusiasts code its color?

The background color in Instagram’s logo isn’t as simple as that of most companies’. Most companies either use one simple flat color, or a simple gradient of 2 color. Instagram though, decides to take it up to the next level and basically put a bunch of radial gradient of colors in various points on the canvas.

Instagram's logo
Instagram’s logo has a lot of colors and seems pretty abstract and random. But hey, I’m not an artist!

If you are a web developer, and you need to create a pretty looking button to link to an Instagram profile, coding this in CSS seems to be a very daunting task. Sure, you can just find an image and use it as a background-image for your button, but where’s the fun in that? So, here’s the code for it in CSS!

.instagram {
  background: -webkit-radial-gradient(circle farthest-corner at 35% 90%, #fec564, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(circle farthest-corner at 0 140%, #fec564, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, rgba(0, 0, 0, 0)), -webkit-linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
  background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, rgba(0, 0, 0, 0) 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, rgba(0, 0, 0, 0)), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}

There you go! A piece of CSS code for those who just don’t want to do it the easy way.

Credits to Katy DeCorah for the CSS code! Check out her amazing pen on CodePen. 

Leave a Reply