CSS Emoji Create Using Only CSS

Those CSS snippets can be used to style or add emojis to your latest projects and websites. Using the only css. Very easy code for creating. Implement on your website.

This tutorial is done by Mirko. The previous tutorial is how you create Pure CSS Typing Animation Effects.

HTML

<div id="smileWrapper">
	<div class="smileContainer">
		<div class="smileBack">
			<div class="smileFace">
				<div class="smileMouth">
					<div class="mouthTeeth"></div>
					<div class="mouthCover"></div>
					<div class="tongue"></div>
				</div>
			</div>
			<div class="eyeL">
				<div class="innerEye"></div>
			</div>
			<div class="eyeR">
				<div class="innerEye"></div>
			</div>
		</div>
	</div>
	<div class="smileContainer">
		<div class="smileBack">
			<div class="smileFace"></div>
			<div class="eyeL">
				<div class="innerEye"></div>
			</div>
			<div class="eyeR">
				<div class="innerEye"></div>
			</div>
			<div class="noWordsMouth"></div>
		</div>
	</div>
	<div class="smileContainer">
		<div class="smileBack">
			<div class="smileFace"></div>
			<div class="eyeL">
				<div class="innerEye"></div>
			</div>
			<div class="eyeR">
				<div class="innerEye"></div>
			</div>
			<div class="sadMouth">
				<div class="sadMouthCover"></div>
			</div>
		</div>
	</div>
</div>

CSS

body {
	background-color: rgb(50, 50, 50);
	margin: 0;
}

/* #smileWrapper is only for centering purposes*/
#smileWrapper {
	width: 600px;
	margin: 0 auto;
}
.smileContainer {
	display: inline-block;
	height: 150px;
	width: 150px;
	margin: 100px 20px;
}
.smileBack {
	position: relative;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	background-color: #f1c13e;
}
.smileFace {
	position: absolute;
	height: 90%;
	width: 90%;
	left: 5%;
	border-radius: 50%;
	background-color: #fcd671;
}
.eyeL, .eyeR {
	position: absolute;
	height: 15%;
	width: 15%;
	background-color: #2a384c;
	border-radius: 50%;
}
.eyeL {
	left: 20%;
	top: 20%;
}
.eyeR {
	right: 20%;
	top: 20%;
}
.innerEye {
	position: absolute;
	left: 10%;
	top: 15%;
	height: 30%;
	width: 30%;
	background-color: rgb(62, 76, 96);
	border-radius: 50%;
}
.smileMouth {
	position: absolute;
	width: 60%;
	height: 50%;
	border-radius: 50%;
	top: 48%;
	left: 20%;
	background-color: #2a384c;
}
.mouthCover {
	position: absolute;
	height: 50%;
	width: 110%;
	left: -5%;
	top: -1%;
	border-radius: 50%;
	background-color: #fcd671;
	z-index: 2;
}
.mouthTeeth {
	position: absolute;
	top: 9%;
	left: 3%;
	height: 50%;
	width: 95%;
	border-radius: 50%;
	background-color: white;
}
.tongue {
	position: absolute;
	bottom: 2%;
	left: 35%;
	height: 20%;
	width: 30%;
	border-radius: 50%;
	background-color: #ed586c;
}
.noWordsMouth {
	position: absolute;
	width: 60%;
	height: 5%;
	top: 65%;
	left: 20%;
	background-color: #2a384c;
	border-radius: 40%;
}
.sadMouth {
	position: absolute;
	height: 30%;
	width: 50%;
	left: 25%;
	top: 56%;
	border-radius: 50%;
	background-color: #2a384c;
}
.sadMouthCover {
	position: absolute;
	height: 92.5%;
	width: 100%;
	border-radius: 50%;
	top: 10%;
	background-color: #fcd671;
}
Leave a Reply