CSS Easter Eggs are back
Tags: css, tutorial, art, frontend
Published: 2023-04-07 17:24:54

Did you color Easter eggs when you were little? 

Does your family color them now? 

Maybe not now cause eggs prices are super high at the moment. They're too expensive to be hidden and lost in the yard or a tea pot, like we did when I was little.  So why not make digital eggs?


I made CSS [Eggs last year](https://dev.to/jarvisscript/css-egg-hunt-5e7b), it was fun so I've done it again. This early part of this article in the summary of the basic set up. The changes start at [Updates New Colors](#new-section).


## Easter Best

![4 eggs, one egg that is purple at the top and changes to blue towards, one eggs is purple in the center and change to blue. One pink and white egg. one eggs goes from pink to white to blue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5zdve3tkazpwze965b6.jpg)
<figcaption>Last year's basket of eggs.</figcaption>



A previous CSS series was based on Halloween sweaters. That project was modified for an Easter Theme. This is the basic sweater. The colors were changed and the items that were in the decorative boxes were replaced. [Click to see how it was made.](https://dev.to/jarvisscript/return-of-css-halloween-4idg) 

A purple background with a row of light purple boxes. Under that a row of alternating green and blue boxes. Then, the sweater torso, a large open area of purple, followed by the rows of boxes in reverse order. 

A `character div` was placed in that `torso div`. Inside the character div is a div for a specific character for this post, it has a class of "egg". Each Egg div will be colored using some version of a gradient.

## It's time to put all your eggs in one basket.


![four pink and white eggs.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urdqddagfsexn53noa64.jpg)<figcaption>Four Easter Eggs</figcaption>



```HTML
<div class="torso"> 
`
`
`
   <div class="character">
     <div class="egg"></div>	
   </div character>
`
`
`
</div>
```

```CSS
/* CHARACTER //////////////// */

.character {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute; 
	overflow: visible;
	margin: -10px 0 0 0;
}

.egg {
	background: 
	linear-gradient(to bottom right, var(--Pink), 
		white );
	height: 364px;
	width: 225px;
	border-top-right-radius: 51%;
	border-top-left-radius: 51%;
	border-bottom-left-radius: 40%;
	border-bottom-right-radius: 40%;
	border: 2px var(--Pink) solid;
	display: flex;
	justify-content: center;
	align-items: center;

	margin-left: 30px; 
	margin-top: 10px;
	overflow: hidden;

}

```
The eggs are made from rectangles with `border-radius` added to the top and bottom. The bottom has less of a border-radius to keep it flatter. 
The egg class has the overall shape and size that all the eggs will use. A second class  was added to the eggs to change the colors or modify how they displayed.



## Updates New Colors <a name="new-section"></a>

The first thing was to change the back ground to a darker purple. That small change added contrast and improves the overall look with a few key strokes. Last year I tried for pastels.


![Dark purple rectangle with rows of light purple boxes.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ibl61b9eiw91wicbatd.jpg) 

```css
:root {
	--MainPurple: #7d3b74;
	--DarkPurple: #1f1d21;
}

.main {
	background: var(--DarkPurple);
}

```

## Painted Eggs ##

A linear gradient running top to bottom gives the eggs the look of a sun set.


![Easter Egg colored to look like a sunset.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8gi4sa4i4yx0b8zhvwp.jpg)

```html
	<div class="character">

	       <div class="egg sunset"></div>

		<div class="egg sunset_reflection"></div>

	</div character>
```


```CSS
:root {
	--MainPurple: #7d3b74;
	--DarkPurple: #1f1d21;
	--Yellow: #ffd700;
	--LgGreen: #00ff58;
	--Blue: #0028ff;
	--Pink: #ff00a7;
	--Purple: #d700ff;
	--Red: #ff0000f2;
}

.sunset {
  background: linear-gradient(
 var(--Pink),
 var(--Yellow), 
 var(--Purple), 
 var(--DarkPurple));
}

.sunset_reflection {
  background: linear-gradient(
 var(--Purple),
 var(--DarkPurple),
 var(--Pink),
 var(--Yellow));
}

```


The `egg_layers` Class changed from the color order. The pair of purple colors was put before the pink and yellow pair.

![2 Easter Eggs colored like sunsets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sw5nsx5y6p3wla8n1c9w.jpg)


Next I used `to-right` to change the direction of the gradient. It now is vertical left to right, instead of top to bottom. The numbers are color stops. They specify where the colors stop and start. 

![3 multi colored Easter Eggs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5x6q9g2287tto02foi7b.jpg)

```css

.eggshape-gradient {
  background: linear-gradient
(to right, 
var(--Purple) 10% 20%, 
var(--DarkPurple) 30% 40%, 
var(--Pink) 50% 60%, 
var(--Yellow) 90%);
}

```

## There Are Four Eggs

Finally a basic radial gradient. It expands from the center outward.


![4 colorful Easter eggs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7x16dxkf3lhzy02dwpkx.jpg)


```css
.radial_basic { 
background: radial-gradient
(var(--Purple), 
var(--Pink), 
var(--Red));
}

```

## Finishing Touches
 
### Count your chickens before the hutch

To finish it off chicks and bunnies were added to the design. They were just made using some keyboard symbols. The slight size difference is between `font-size: 1.5rem` and `font-size: 2rem`.

![four colorful eggs. baby chickens and bunnies drawn with symbols.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lihf0yemr4lpgckq5wc.jpg)

### No more time for crying over spilled milk.

Looking back I should have used the same colors through out to make the examples clearer. I got interested in making it look good and not what might be easier to understand.

See my [CSS gradient post](https://dev.to/jarvisscript/css-color-gradients-258n) where I illustrate different gradients if you want to learn more.


```
-$JarvisScript git push
```

1. For non English readers there several idioms references in the headings. These idioms were used in "Dare to Be Stupid" by Weird AL.


2. There are four eggs references a Captain Picard quote from Star Trek Next Generation.