Instagram new logo css background

Question

Recently, Instagram logo has changed as you all know. I need vector logo but it is not possible, I mean gradients. Is there any css code for new logo?

Answer 1

You can change the sizes as you see fit.

.insta-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 20%;
  background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf)
}
.insta-icon:after,
.insta-icon:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  content: ''
}
.insta-icon:before {
  border-radius: 20%
}
.insta-icon:after {
  width: 11px;
  height: 11px;
  border-radius: 50%
}

If you're feeling particularly adventurous you can use the new(ish) CSS Variables to make it easier to change the size.

.insta-icon.small {
  --insta-icon-size: 64px;
}
.insta-icon {
  --insta-icon-size: 128px;
}
.insta-icon.large {
  --insta-icon-size: 256px;
}
.insta-icon {
  position: relative;
  width: var(--insta-icon-size);
  height: var(--insta-icon-size);
  border-radius: 20%;
  background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf)
}
.insta-icon:after,
.insta-icon:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--insta-icon-size)/1.5);
  height: calc(var(--insta-icon-size)/1.5);
  border: calc(var(--insta-icon-size)/18) solid #fff;
  transform: translate(-50%, -50%);
  content: ''
}
.insta-icon:before {
  border-radius: 20%
}
.insta-icon:after {
  width: calc(var(--insta-icon-size)/4);
  height: calc(var(--insta-icon-size)/4);
  border-radius: 50%
}

64:



128:



256: