CSS Egg Shape and CSS Easter eggs

Easter is coming very soon and with the Easter coloured eggs. I love coming up with new Easter egg decorating ideas each year 🙂

Coloured eggs have become one of the most widely recognized Easter symbols, but did you know that coloured eggs are older than Easter?

Yes, in many cultures, the coloured egg is a symbol of new life fertility, and rebirth.

Today I’ll show you how to create the Egg shape in CSS using the border-radius property and some simple ideas how to style the CSS eggs.

Let’s start with the CSS Egg Shape:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>

.egg {
   position: absolute;
   width: 140px;
   height: 200px;
   background-color: lightblue;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
</style>

<body>
   <div class="egg"></div>
</body>
</html>

Output:

To style/ decorate the CSS eggs I used the CSS Gradients (check also CSS background stripes) and the CSS box-shadow property.

Demo:

Step1.

Add HTML

Create the container and add three eggs:

<div class="container">
  <div class="eggOne"></div>
  <div class="eggTwo"></div>
  <div class="eggThree"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  background-color: #bee3db;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

.container {
  position: relative;
}

Add the eggs:

.eggOne, .eggTwo, .eggThree {
   position: absolute;
   overflow:hidden;
   display: inline-block;
   width: 126px;
   height: 180px;
   box-shadow: inset -10px -10px rgba(0,0,0,0.1);
   top:-100px;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Style the first egg by using the linear gradient background:

.eggOne {
  left:-300px;
  background: repeating-linear-gradient(#f9c74f, #f9c74f 10px,
  #90be6d 10px, #90be6d 20px);
}

Style the second egg by using box-shadow property:

.eggTwo {
  left:-100px;
  background-color: #f94144;
}

.eggTwo:before {
  content:"";
  position:absolute;
  border-radius:50%;
  background-color: #fff;
  height:25px;
  width:25px;
  left:10px;
  box-shadow: 40px 20px #fff, 70px 60px #fff, 100px 30px #fff, 30px 175px #fff, 20px 60px #fff,-10px 95px #fff, -20px 135px #fff, 30px 135px #fff, 30px 95px #fff, 70px 105px #fff, -10px 40px #fff, 80px 155px #fff;
}

.eggTwo:after {
  content:"";
  position: absolute;
  box-shadow: inset -10px -10px rgba(0,0,0,0.02);
  width: 126px;
  height: 180px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Style the third egg by using the linear gradient background:

.eggThree {
  left:100px;
  background: repeating-linear-gradient(-45deg, #70c1b3, #70c1b3 20px,
  #247ba0 20px, #247ba0 40px);
}

Add shadow to the eggs:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  border-radius:50%;
  z-index:-1;
  width:130px;
  height:20px;
  top:65px;
  left:-300px;
  box-shadow: 200px 0 rgba(0,0,0,0.1), 400px 0 rgba(0,0,0,0.1);
}

To see the CSS Easter Eggs on the website go to lenastanley.com.

Watch also the video tutorial: