Try them live — All 20 creatures are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Battle Monsters Part 1, Baby Monsters.

---

This post covers the final evolution: 10 more battle monsters and 10 elemental dragons — the largest, most detailed pixel art sprites in CSSKit. Dragons use ~14×12 pixel grids (vs ~10×10 for monsters) with translateY(-4px) fly animations and elemental glow auras.

---

Part A: Battle Monsters (#241-250)

241. Shadow Cat

Sleek dark feline with glowing pink eyes — stealthy void prowler.

How It Works

At 50%, tail pixels at row 7 shift from (1,7) (4,7) to (0,7) (5,7) — the tail sways outward. A single pink pixel (#f472b6) at the eye position creates a menacing glow against the dark body (#374151, #1f2937). The most compact monster sprite at ~6×9 pixels.

<div class="MonsterShadowCat"></div>

---

242. Thunder Bird

Majestic sky lord with sparking yellow wings.

How It Works

At 50%, wing-tip pixels shift — row 5 loses pixels at x=1 and x=8, row 6 shifts from x=2-5 to x=3-6. This creates a wing-fold motion during the translateY(-2px) bob. Yellow/gold palette (#eab308, #facc15, #a16207) gives an electric feel.

<div class="MonsterThunderBird"></div>

---

243–250. More Battle Monsters

243. Ice Wyrm — Frozen serpentine beast. At 50%, tail tip at row 9 shifts from (5,9) to (6,9). Cyan palette: #a5f3fc (head), #67e8f9 (body), #22d3ee (tail). ~8×10 sprite — tallest of the monsters.

244. Fire Salamander — Amphibian wreathed in flame. At 50%, foot pixel at row 8 shifts position. Three-tone fire palette: #fbbf24 (head/flame), #f97316 (body), #ef4444 (base).

245. Water Kraken — Deep sea terror with writhing tentacles. The most dramatic pixel changes: at 50%, tentacle pixels at rows 6-7 redistribute significantly — tentacles spread outward then retract. Blue palette: #0ea5e9, #0284c7, #0369a1.

246. Earth Golem — Immovable stone guardian. Pure translateY(-2px) bob with no pixel changes between frames. Brown palette: #a16207, #92400e, #78350f. ~10×9 sprite.

247. Psychic Brain — Floating psionic horror. Pure bob animation. Fuchsia palette: #f0abfc, #d946ef, #a21caf. ~10×8 sprite.

248. Venom Plant — Carnivorous flora with dripping toxins. Pure bob animation. Red/green palette: #ef4444 (venom), #22c55e (leaves), #16a34a (stem). ~10×9 sprite.

249. Sand Worm — Giant desert worm. Tallest sprite at ~10×10. Amber palette: #fbbf24, #d4a017, #a16207. Pure bob animation.

250. Storm Eagle — Tempest raptor riding thunderheads. Blue palette: #60a5fa, #3b82f6, #1d4ed8. Pure bob animation. ~10×9 sprite.

---

Part B: Elemental Dragons (#251-260)

Dragons are the largest pixel art in CSSKit — ~14×12 pixel grids with 4-color palettes, elemental glow auras, and translateY(-4px) fly animations. All 10 dragons share the same silhouette — they’re palette swaps.

251. Fire Dragon

Mighty fire dragon with blazing wings — the legendary beast of flame.

How It Works

The dragon uses a ~14×12 pixel grid with 4 color tiers (head → wings → body → tail). At the 50% keyframe, two things happen: (1) eye pixels at (0,6) and (1,6) disappear — the dragon blinks, and (2) translateY(-4px) lifts the entire dragon upward — a fly/hover bob. The drop-shadow(0 0 6px #ef4444) creates a fiery aura.

.DragonFire {
  --dfr-speed: 1s;
  --dfr-scale: 2;
  --dfr-glow: #ef4444;
  width: 1px;
  height: 1px;
  transform: scale(var(--dfr-scale));
  filter: drop-shadow(0 0 6px var(--dfr-glow));
  animation: dfr-fly var(--dfr-speed) ease-in-out infinite;
}

@keyframes dfr-fly {
  0%, 100% {
    box-shadow:
      /* head (yellow) */ 5px 0px #fef08a, 6px 0px #fef08a, /* ... */
      /* wings (orange) */ 2px 4px #f97316, 3px 4px #f97316, /* ... */
      /* body (red) */ 0px 6px #ef4444, 1px 6px #ef4444, /* ... */
      /* tail (dark red) */ 5px 10px #dc2626, /* ... */;
  }
  50% {
    /* Same pixels minus eye at (1,6) — dragon blinks */
    box-shadow: /* ... (0,6) and (1,6) removed ... */;
    transform: scale(var(--dfr-scale)) translateY(-4px);
  }
}

<div class="DragonFire"></div>

Customize: --dfr-speed (0.3-4s), --dfr-scale (1-3.5x), --dfr-glow (aura color).

---

252. Ice Dragon

Frost-breathing arctic dragon with crystalline wings.

Same silhouette as Fire Dragon — only colors change. Ice palette: #e0f2fe (head), #7dd3fc (wings), #38bdf8 (body), #0284c7 (tail). Cyan glow aura.

<div class="DragonIce"></div>

---

253–260. More Elemental Dragons

253. Thunder Dragon — Lightning-wreathed storm beast. Palette: #fef9c3 (pale yellow), #facc15 (gold), #eab308 (amber), #ca8a04 (dark gold). Golden glow.

254. Shadow Dragon — Void-touched nether beast. Palette: #c084fc (light purple), #a855f7 (violet), #7c3aed (deep purple), #6d28d9 (dark violet). Violet glow.

255. Crystal Dragon — Prismatic gemstone dragon. Palette: #f0abfc (light pink), #e879f9 (fuchsia), #d946ef (purple-pink), #a21caf (dark magenta). Fuchsia glow.

256. Nature Dragon — Ancient forest guardian. Palette: #86efac (mint), #4ade80 (green), #22c55e (main), #15803d (dark). Green glow.

257. Sea Dragon — Oceanic leviathan. Palette: #a5f3fc (ice blue), #67e8f9 (cyan), #06b6d4 (main), #0e7490 (deep). Cyan glow.

258. Wind Dragon — Sky phantom. Palette: #e2e8f0 (silver), #cbd5e1 (light slate), #94a3b8 (main), #64748b (dark). Slate glow.

259. Ancient Dragon — Elder wyrm of untold age. Slightly larger sprite (~16×12). Palette: #fde68a (amber), #d4a017 (gold), #a16207 (amber), #854d0e (dark). 3-pixel wing blink at 50%.

260. Baby Emperor Dragon — Destined king of all dragons. Uses 4 color shades instead of 3, with an extra #fbbf24 amber crown layer. Palette: #fef9c3, #fbbf24, #f59e0b, #d97706, #b45309. Golden royal glow.

---

Dragon Color Reference

#	Dragon	Head	Wings	Body	Tail	Glow
251	Fire	#fef08a	#f97316	#ef4444	#dc2626	#ef4444
252	Ice	#e0f2fe	#7dd3fc	#38bdf8	#0284c7	#67e8f9
253	Thunder	#fef9c3	#facc15	#eab308	#ca8a04	#facc15
254	Shadow	#c084fc	#a855f7	#7c3aed	#6d28d9	#a855f7
255	Crystal	#f0abfc	#e879f9	#d946ef	#a21caf	#d946ef
256	Nature	#86efac	#4ade80	#22c55e	#15803d	#22c55e
257	Sea	#a5f3fc	#67e8f9	#06b6d4	#0e7490	#06b6d4
258	Wind	#e2e8f0	#cbd5e1	#94a3b8	#64748b	#94a3b8
259	Ancient	#fde68a	#d4a017	#a16207	#854d0e	#a16207
260	Emperor	#fef9c3	#fbbf24	#f59e0b	#b45309	#fbbf24

Creating a custom dragon: Copy the Fire Dragon CSS, replace the 4 color values with your element palette, change the CSS variable prefix (--dfr- → --dxx-), and update the glow color. The pixel art stays identical.

---

What’s Next?

That covers all 10 battle monsters and 10 elemental dragons. In the next posts, we build the world around them — pixel art environments (trees, mushrooms, waterfalls, caves) and weather effects (sun, rain, snow, lightning).

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