*{ margin: 0; padding: 0; } .container{ width: 100%; height: 100vh; background: royalblue; display: flex; justify-content: center; align-items: center; } .insta{ width: 270px; height: 270px; background: radial-gradient(circle at 33% 100% , #fed373 4% , #f15245 30% , #d92e7f 62% , #9b36b7 87% , #515ecf); border-radius: 54px; display: flex; justify-content: center; align-items: center; } .insta-inner{ width: 200px; height: 200px; border-radius: 54px; border: white 10px solid; display: flex; justify-content: center; align-items: center; position: relative; } .insta-inner2{ width: 80px; height: 80px; border-radius: 50%; border: white solid 10px; } .insta-inner:after{ content: ""; width: 20px; height: 20px; border-radius: 50%; border: white solid 5px; position: absolute; top: 20px; right: 20px; background: white; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter