<div class="instagram">
  <div class="big-box">
    <div class="box-1">
      <div class="circle-1">
      </div>
      <div class="circle-2">
      </div>
    </div>
  </div>
</div>
:root {
  --gradient: 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%);
  
  --border-radius: 50px;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F5F5F5;
}

.big-box {
  height: 200px;
  width: 200px;
}

.box-1 {
  width: 150px;
  height: 150px;
  border: 10px solid #fff;
}

.circle-1 {
  width: 60px;
  height: 60px;
}

.circle-2 {
  position: absolute;
  top: 20px;
  right: 20px;
}

.big-box, .box-1, .circle-1, .circle-2 {
  border-radius: var(--border-radius);
}

.big-box, .box-1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient);
}

.box-1, .circle-1, .circle-2 {
  border: 10px solid #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.