<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.