DEV Community

Cover image for CSS Logos: Instagram logo
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

CSS Logos: Instagram logo

I'm pretty sure everyone has seen this one before, the Instagram logo.

For reference, it's the modern one that looks like this:

Instagram logo

Analysing the logo

I'll be honest that the logo looked way easier to create than it was.

You might wonder what's so tricky about it?
And it's all in the background, you'll see that even my version is not perfect, but every sample image out on the internet has a different background gradient.

When you look closely, you see it's not one particular gradient. It's kind of overlapping gradients.

Let's dive into it, and I'll show you how I created my version.

CSS Instagram logo

I make it extra challenging by only using one div and doing everything from that one element.



<div class="instagram"></div>


Enter fullscreen mode Exit fullscreen mode

Let's start by setting some variables we'll use.



:root {
  --size: 50vmin;
  --white: #fff;
  --blue: #3051f1;
  --purple: #c92bb7;
  --red: #f73344;
  --orange: #fa8e37;
  --yellow: #fcdf8f;
  --yellow_to: #fbd377;
}


Enter fullscreen mode Exit fullscreen mode

Then let's move to creating the basic outline of the box. I'll use em units as they allow for better scaling of the borders.



.instagram {
  font-size: var(--size);
  width: 1em;
  aspect-ratio: 1;
  border-radius: 0.2em;
  background: var(--purple);
}


Enter fullscreen mode Exit fullscreen mode

I've temporarily set the background to purple so you can see what we have so far.

Instagram logo outline shape

Now let's dive into these gradients. It's a bit tricky as there is an overlapping gradient.

Luckily for us, CSS gradients allow for multiple instances that can overlap in one background.
For example, this is valid code:



background: linear-gradient(45deg, blue, transparent), radial-gradient(red, transparent);


Enter fullscreen mode Exit fullscreen mode

This would give us something like this:

CSS overlapping gradients

Now let's see how we can start. I decided to start with the blue/purple background gradient.



linear-gradient(145deg, var(--blue) 10%, var(--purple) 70%)


Enter fullscreen mode Exit fullscreen mode

This result in the following output.

CSS linear gradient

Now the tricky part is to have the yellow, orange, and red gradients overlap.
To achieve that, we must ensure that the gradient sits on top of the linear one we just created.



background: radial-gradient(
    circle farthest-corner at 28% 100%,
    var(--yellow) 0%,
    var(--yellow_to) 10%,
    var(--orange) 22%,
    var(--red) 35%,
    transparent 65%
  ), linear-gradient(145deg, var(--blue) 10%, var(--purple) 70%);


Enter fullscreen mode Exit fullscreen mode

With this in place, we should get the following result.

Stacked gradients in CSS

And that's it, to me, that looks super close to the actual logo.

Note: You could enhance this by using multiple radial gradients stacked on top of each other.

The next thing we need is the camera outline icon, and since we are out of elements, we have to use the :before and :after selector again.

Let's start with the outline.



.instagram:before {
  content: '';
  color: var(--white);
  position: absolute;
  border-radius: inherit;
  aspect-ratio: 1;
  border: 0.05em solid;
  width: 65%;
}


Enter fullscreen mode Exit fullscreen mode

Instagram outline border in CSS

Then for the inside, we simply use the after selector.



.instagram:after {
  content: '';
  color: var(--white);
  position: absolute;
  border-radius: inherit;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.05em solid;
  width: 35%;
}


Enter fullscreen mode Exit fullscreen mode

Instagram circle logo addition in CSS

As you can see, both the before and after are very similar. We simply make the one more rounded and smaller.

I hear you wonder, but what about the little dot? We don't have any selectors left.
And that's true, but we have our good friend the box-shadow we can use for this.



.instagram:after {
  box-shadow: 0.22em -0.22em 0 -0.18em;
}


Enter fullscreen mode Exit fullscreen mode

With that in place, we should see the result you see in this CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (14)

Collapse
 
moose_said profile image
Mostafa Said

Fantastic work Chris! I really admire those logos you're creating.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks Mostafa,
I really enjoy the challenge of finding the right solutions and playing around with possible outcomes.

Have you tried recreating things in CSS before?

Collapse
 
moose_said profile image
Mostafa Said

No not really. I'm recently only using TailwindCSS for creating my web apps. I think TailwindCSS wasn't built for that

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Ah no, neither is CSS haha.
It's kind of pointless but a good exercise to find specific CSS methods.

Some of this could easily be done in Tailwind though ๐Ÿคฏ

Thread Thread
 
moose_said profile image
Mostafa Said

A good exercise to solve problems without having a guide. I CSS art is super impressive.

Collapse
 
darkterminal profile image
Imam Ali Mustofa

Awesome!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks a lot Imam ๐Ÿ’–

Collapse
 
darkterminal profile image
Imam Ali Mustofa

Are you made this series in daily?! ๐Ÿคฏ

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Yes, I'm doing one daily for this series. But then it's back to regular web development articles.

Thread Thread
 
darkterminal profile image
Imam Ali Mustofa

OMG!!! ๐Ÿคฏ

Collapse
 
dovey21 profile image
Somtochukwu Nnaji

Well done ๐Ÿ‘

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks a lot ๐Ÿ’ช

Some comments may only be visible to logged-in visitors. Sign in to view all comments.