CSS Pixel Art Eggs — 10 Elemental Hatching Effects with Code

Try them live — All 10 elemental eggs are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Pixel Art Box-Shadow Basics, Card & Divider Animations.

---

Monster-taming game eggs — 10 elemental pixel art eggs, each with a unique color palette and a shared hatching animation pattern. The egg wobbles, flashes white, and pulses with elemental glow. All built with pure CSS box-shadow pixel art.

---

The Shared Technique

All 10 eggs use the exact same animation structure — only the color palette changes per element. Here’s the pattern:

0%-70%-100%  →  Rest state (normal egg pixels)
10%          →  Wobble right (rotate 5deg)
20%          →  Wobble left (rotate -5deg)
30%          →  Wobble right (rotate 3deg)
40%          →  Wobble left (rotate -3deg)
50%          →  PULSE: white flash + glow intensifies + scale 1.05x
60%          →  Back to rest

Each egg has 3 color tiers: highlight (top rows), body (middle rows), shadow (bottom rows), plus #ffffff white for the flash effect.

---

211. Fire Egg

Blazing fire egg with pulsing heat — orange/red glow.

How It Works

The egg is drawn on a 1px element using box-shadow — each Xpx Ypx #color places one pixel. The animation has three phases:

1. Wobble (10%-40%): rotate(5deg) → rotate(-5deg) → rotate(3deg) → rotate(-3deg) — simulates a hatching wiggle
2. Pulse (50%): Top-row highlight pixels change to #ffffff (white flash), drop-shadow expands from 0 0 4px to 0 0 12px (intensified glow), and scale(1.05) makes the egg swell
3. Rest (0%, 70%, 100%): Normal pixel art, gentle 0 0 4px ambient glow

.EggFire {
  --fir-speed: 1.5s;
  --fir-scale: 3;
  --fir-glow: #f97316;
  width: 1px;
  height: 1px;
  position: relative;
  left: -28px;
  top: -20px;
  transform: scale(var(--fir-scale));
  filter: drop-shadow(0 0 4px var(--fir-glow));
  animation: fir-hatch var(--fir-speed) ease-in-out infinite;
}

Colors: #fbbf24 (amber highlight), #f97316 (orange body), #ef4444 (red shadow).

<div class="EggFire"></div>

---

212. Water Egg

Cool water egg with rippling surface — blue glow.

How It Works

Identical structure to the Fire Egg — same keyframe stops, same wobble/pulse pattern. Only the color palette changes: cyan highlights, sky blue body, deep blue shadow.

.EggWater {
  --wat-speed: 1.5s;
  --wat-scale: 3;
  --wat-glow: #0ea5e9;
  width: 1px;
  height: 1px;
  transform: scale(var(--wat-scale));
  filter: drop-shadow(0 0 4px var(--wat-glow));
  animation: wat-hatch var(--wat-speed) ease-in-out infinite;
}

Colors: #67e8f9 (cyan highlight), #0ea5e9 (sky blue body), #3b82f6 (blue shadow).

<div class="EggWater"></div>

---

213. Grass Egg

Natural grass egg with leaf patterns — green glow.

How It Works

Green palette applied to the same template. At the 50% keyframe, select top-row pixels flash white while the drop-shadow glow intensifies from 4px to 12px spread.

.EggGrass {
  --gra-speed: 1.5s;
  --gra-scale: 3;
  --gra-glow: #22c55e;
  /* ...same structure... */
}

Colors: #86efac (light green), #22c55e (green), #16a34a (dark green).

<div class="EggGrass"></div>

---

214. Electric Egg

Charged electric egg with sparks — yellow/gold glow.

.EggElectric {
  --ele-glow: #eab308;
  /* Colors: #fef08a highlight, #eab308 body, #facc15 shadow */
}

<div class="EggElectric"></div>

---

215–220. More Elemental Eggs

215. Dark Egg — Shadowy purple egg with mist. Colors: #a78bfa (light purple), #7c3aed (purple), #6d28d9 (dark purple). Glow: #7c3aed.

216. Ice Egg — Frozen crystalline egg. Colors: #a5f3fc (ice blue), #06b6d4 (cyan), #0891b2 (dark cyan). Glow: #06b6d4.

217. Psychic Egg — Mysterious pink aura egg. Colors: #f9a8d4 (light pink), #ec4899 (hot pink), #db2777 (dark pink). Glow: #ec4899.

218. Earth Egg — Rocky brown/gold egg. Colors: #fbbf24 (golden yellow), #a16207 (dark amber), #92400e (deep brown). Glow: #a16207.

219. Wind Egg — Swift silver-gray egg. Colors: #cbd5e1 (silver), #94a3b8 (slate), #64748b (dark slate). Glow: #94a3b8.

220. Light Egg — Radiant holy glow egg. Colors: #fef9c3 (pale cream), #fbbf24 (bright gold), #f59e0b (deep gold). Glow: #fbbf24.

---

Element Color Reference

Egg	Highlight	Body	Shadow	Glow	Element Feel
Fire	#fbbf24	#f97316	#ef4444	#f97316	Hot orange/red
Water	#67e8f9	#0ea5e9	#3b82f6	#0ea5e9	Cool blue/cyan
Grass	#86efac	#22c55e	#16a34a	#22c55e	Natural green
Electric	#fef08a	#eab308	#facc15	#eab308	Bright yellow
Dark	#a78bfa	#7c3aed	#6d28d9	#7c3aed	Shadow purple
Ice	#a5f3fc	#06b6d4	#0891b2	#06b6d4	Frozen cyan
Psychic	#f9a8d4	#ec4899	#db2777	#ec4899	Mystical pink
Earth	#fbbf24	#a16207	#92400e	#a16207	Earthy brown
Wind	#cbd5e1	#94a3b8	#64748b	#94a3b8	Swift silver
Light	#fef9c3	#fbbf24	#f59e0b	#fbbf24	Holy gold

Customization params per egg: --{prefix}-speed (animation duration), --{prefix}-scale (pixel size, 2-5), --{prefix}-glow (glow color).

---

Creating Your Own Elemental Egg

Since all eggs share the same animation template, you can create a new element in 3 steps:

1. Choose 3 colors: light (highlight), medium (body), dark (shadow)
2. Replace colors in the box-shadow values — top 2 rows get highlight, middle 4 rows get body, bottom 2 rows get shadow
3. Set the glow color in the CSS variable and drop-shadow filter

The wobble + pulse + flash animation stays the same. It’s a color-swap template.

---

What’s Next?

That covers all 10 elemental eggs from CSSKit. In the next post, the eggs hatch into baby monsters — 10 cute pixel art creatures with idle animations (fire lizard, water turtle, grass bulb, electric mouse, dark bat, ice seal, psychic eye, earth mole, wind bird, light fairy).

Explore all 310 animations live at CSSKit or star the repo on GitHub.