Connect with us!

Create Easter Egg in HTML and CSS using Visual Code Editor

Salow
January 2, 2022
CSS, Shape

An Easter egg is a message, or element concealed in programming, a computer game, a film, typically electronic medium.

The term used was first founder by Steve Wright to portray a secret message in the Atari computer game adventure.

Many companies over the years have been using Easter eggs in the games, vidoes and movies.

Have you ever wondered how to create one using HTML5 and CSS3.

The most important properties we use to create easter egg are:

The background-color property of CSS sets the background color of an element.

The border-radius rounds the corners of the element.

Here is the CSS class for implementing it.

Table of Contents

Code Block

.easter-egg {
        display: block;
        width: 126px;
        height: 180px;
        background-color: gold;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      }

Yay! We have created a easter egg using CSS. Its very simple to use the class above and create this element.

Here is the output:

Easter Egg CSS — easter egg css

You can find the complete coding tutorial in the following Youtube video.

Video Tutorial for Creating Easter Egg

Easter egg shorts

Here is the complete code of HTML and CSS for creating Easter Egg

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .easter-egg {
        display: block;
        width: 126px;
        height: 180px;
        background-color: gold;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Easter Egg</h1>
    <div class="easter-egg"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Easter Egg using CSS and HTML. Good luck and happy coding !