INSTAGRAM LOGO CSS ART

CSS Instagram Logo

HTML:

view raw instagram.html hosted with ❤ by GitHub

CSS:

	body
	{
	background:linear-gradient(90deg,#fccc63,#fbad50,#e95950,#cd486b,#bc2a8d,#8a3ab9,#4c68d7);
	}
	#outer
	{
	width:160px;
	height: 160px;
	background:radial-gradient(#464948,#4a4847,#474645,#4b4948,#322f30);
	position: absolute;
	transform: translate(-50%,-50%);
	top:50%;
	left:50%;
	border-radius: 40px;
	border:5px solid #000000c9;
	box-shadow: inset 0px 0px 5px #000000c9;
	}
	.circle1
	{
	width: 110px;
	height: 110px;
	background:linear-gradient(45deg,#fccc63,#fbad50,#e95950,#cd486b,#bc2a8d,#8a3ab9,#4c68d7);
	border-radius: 50%;
	position: relative;
	top:25px;
	left:25px;
	box-shadow: inset 0px 0px 5px 1px #000000c9, 15px 15px 10px 10px #3b343d, 0px 0px 5px white;
	}
	.circle1:before
	{
	position: absolute;
	content: "";
	width:70px;
	height: 70px;
	background-color: #000000c9;
	border-radius: 50%;
	top:20px;
	left:20px;
	box-shadow: inset -5px 0px 20px 10px #573545,0px 0px 5px 0px #000000c9;
	}

	.circle2
	{
	width:20px;
	height: 20px;
	background:linear-gradient(45deg,#fccc63,#fbad50,#e95950,#cd486b,#bc2a8d,#8a3ab9,#4c68d7);
	position: absolute;
	border-radius: 50%;
	top:8%;
	left:78%;
	box-shadow: 6px 1px 4px 4px #3b343d,0px 0px 5px white;
	}
	.glass
	{
	height: 160px;
	width:160px;
	background-color: rgba(76, 68, 78,0.2);
	position: absolute;
	transform: translate(-50%,-50%);
	top:50%;
	left: 50%;
	border-radius: 40px;
	border:5px solid #403e3c;
	box-shadow: inset 0px 0px 5px #000000c9;
	}