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;
}

3 Comments

  1. I like this internet site because so much useful material on here : D.

  2. I’m gone to tell my little brother, that he should also pay a quick visit this blog on regular basis
    to get updated from latest gossip.

  3. An interesting discussion is worth comment. I think that you should write more on this topic, it might not be a taboo subject but generally people are not enough to speak on such topics. To the next. Cheers

Leave a Reply