Create Smiley Emojis using HTML and CSS.

Creating your own emojis using HTML and CSS and playing with eyes, lips, color etc. is fun. In this tutorial, I have created some different type of emojis by manipulating one or two or more elements using CSS. So let’s ready to learn how to create smiley using pure HTML and CSS.

Create Smiley Emoji Using Pure HTML and CSS

In the below code, I have created three classes named as “face”, “eyes” and “smile”. All these three classes are used to create elements of emojis as the name suggests. Here internal CSS is used to manipulate classes.

Classes:




  • face: This class is created to manipulate with face color and shape of it and this will be the main class which holds other elements as well. Here in this emoji, I have created a round face using attribute border-radius : 50% with yellow color.
  • eyes: This class is created to play with eyes. Here in this code, using the same attribute border-radius: 50% with black color but with a smaller size.
  • smile: the Class smile is created to create a smile in my emoji.Here in this code,using attribute border-bottom-left-radius: 50% and border-bottom-right-radius:50%. These two attributes make rectangle round from the bottom side only.
<html>
<head>
    <style>
    .face{
        background-color: yellow;
        height: 200px;
        width:200px;
        border-radius: 50%;
        margin: 10;
        float:left;
    }
        .eyes{
            background-color: black;
            height:20px;
            width:20px;
            border-radius:50%;
            margin: 60;
        }
        .smile{
            height:20;
            width:60;
            background-color: red;
            border-bottom-right-radius: 50%;
            border-bottom-left-radius: 50%;
            margin-left:70;
            position:fixed;
        }
</style>
</head>
<body>
    <div class="face">
        <div class="eyes"><div class="eyes"></div></div>
        <div class="smile"></div>    
    </div>
</body>
</html>

Emojis using HTML and CSS

Here in this code, I have created 6 different emojis using the above smiley emoji code. In the output, you can see 6 different types of emojis with the variation in lips and eyes. These variations are done using inline CSS using attribute of the border only. Here in this code, I have created one more class known as flat-eyes, where border-radius attribute is not used.

<html>
<head>
    <style>
    .face{
        background-color: yellow;
        height: 200px;
        width:200px;
        border-radius: 50%;
        margin: 10;
        float:left;
    }
        .eyes{
            background-color: black;
            height:20px;
            width:20px;
            border-radius:50%;
            margin: 60;
        }
        .smile{
            height:20;
            width:60;
            background-color: red;
            border-bottom-right-radius: 50%;
            border-bottom-left-radius: 50%;
            margin-left:70;
            position:fixed;
        }
        .flat-eyes{
            background-color: black;
            height:10px;
            width:20px;
            margin: 65;
        }
    </style>   
</head>
<body>
    <div class="face">
        <div class="eyes"><div class="eyes"></div></div>
        <div class="smile"></div>    
    
    </div>
    <div class="face">
        <div class="eyes"><div class="eyes"></div></div>
        <div class="cover"></div>
        <div class="smile" style="border-top-left-radius: 90%"></div>    
    </div>
        <div class="face">
        <div class="eyes"><div class="eyes"></div></div>
        <div class="smile" style="border-top-left-radius: 90%;border-top-right-radius: 90% ; border-bottom-left-radius: 70%;border-bottom-right-radius: 70%"></div>    
    </div>
        <div class="face">
        <div class="eyes"><div class="eyes"></div></div>
        <div class="smile" style="border-bottom-left-radius:0%;border-bottom-right-radius: 0%; border-top-left-radius: 100%;border-top-right-radius: 100%;"></div>    
    </div>
    <div class="face">
        <div class="eyes"><div class="eyes"></div></div>
        <div class="smile" style="border-bottom-left-radius:0%;border-bottom-right-radius: 0%; border-top-left-radius: 0%;border-top-right-radius: 0%; height:10px;"></div></div>
    <div class="face">
        <div class="flat-eyes"><div class="flat-eyes"></div></div>
        <div class="smile" style="border-bottom-left-radius:0%;border-bottom-right-radius: 0%; border-top-left-radius: 0%;border-top-right-radius: 0%; height:10px;"></div>    
    </div>
    </body>
</html>

Try to create your own by manipulating elements.

create smiley using HTML CSS

Smiley Emoji using HTML and CSS only

Check Out Other Blogs as well:


Leave a Reply

Your email address will not be published. Required fields are marked *