DEV Community

Muhammad Abdu ar Rahman
Muhammad Abdu ar Rahman

Posted on • Originally published at abduarrahman.com

CSS Pixel Art Eggs — 10 Elemental Hatching Effects with Code

#css #animation #showdev #pixelart

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
Enter fullscreen mode Exit fullscreen mode

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.

See it live on CSSKit — egg fire animation

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;
}
Enter fullscreen mode Exit fullscreen mode

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

<div class="EggFire"></div>
Enter fullscreen mode Exit fullscreen mode

212. Water Egg

Cool water egg with rippling surface — blue glow.

See it live on CSSKit — egg water animation

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;
}
Enter fullscreen mode Exit fullscreen mode

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

<div class="EggWater"></div>
Enter fullscreen mode Exit fullscreen mode

213. Grass Egg

Natural grass egg with leaf patterns — green glow.

See it live on CSSKit — egg grass animation

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... */
}
Enter fullscreen mode Exit fullscreen mode

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

<div class="EggGrass"></div>
Enter fullscreen mode Exit fullscreen mode

214. Electric Egg

Charged electric egg with sparks — yellow/gold glow.

See it live on CSSKit — egg electric animation

.EggElectric {
  --ele-glow: #eab308;
  /* Colors: #fef08a highlight, #eab308 body, #facc15 shadow */
}
Enter fullscreen mode Exit fullscreen mode 
<div class="EggElectric"></div>
Enter fullscreen mode Exit fullscreen mode

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.

Originally published at abduarrahman.com

Explore all 310 animations:

Follow the project:

Support: Ko-fi

Top comments (0)