Try them live — All 10 battle monsters are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Baby Monsters, Elemental Eggs.

The baby monsters have evolved! Battle monsters are larger, more detailed pixel art sprites (~10×10 pixel grids) with idle animations — prowling, creeping, slithering, and floating. All built with the same box-shadow technique on a single <div>.

Battle Monster Technique

These monsters are bigger than the babies — larger pixel grids mean more detail. The animation pattern is consistent:

• 2-frame idle (0%,100% + 50%) with ease-in-out infinite
• translateY(-2px) at 50% for a breathing/prowling bob
• Subtle pixel shifts between frames (leg positions, tentacle movement, tail sway)
• Scale factor: 2.5x default (range 1.5-4x)
• Speed: 1s default (range 0.3-4s)

231. Battle Wolf

Fierce wolf with prowling animation — loyal beast with sharp fangs.

See it live on CSSKit — monster wolf animation

How It Works

At the 50% keyframe, translateY(-2px) lifts the wolf into a prowl. The feet pixels at row 8 shift: 2px 8px and 8px 8px move to 3px 8px and 7px 8px — the paws step inward, simulating a creeping gait. Three-tone gray palette gives depth: #e2e8f0 (head), #94a3b8 (body), #64748b (legs).

.MonsterWolf {
  --mwo-speed: 1s;
  --mwo-scale: 2.5;
  width: 1px;
  height: 1px;
  transform: scale(var(--mwo-scale));
  animation: mwo-idle var(--mwo-speed) ease-in-out infinite;
}

@keyframes mwo-idle {
  0%, 100% {
    box-shadow:
      /* head */ 4px 0px #e2e8f0, 5px 0px #e2e8f0,
      /* body */ 2px 3px #94a3b8, 3px 3px #94a3b8, /* ... */
      /* legs */ 2px 8px #64748b, 8px 8px #64748b;
  }
  50% {
    box-shadow: /* same but feet at 3px,7px instead of 2px,8px */;
    transform: scale(var(--mwo-scale)) translateY(-2px);
  }
}

<div class="MonsterWolf"></div>

232. Giant Spider

Venomous spider with creeping legs — eight-legged terror with red eyes.

See it live on CSSKit — monster spider animation

How It Works

The widest sprite in the set (~12px wide). At 50%, leg pixels at rows 6-8 shift positions — legs spread outward then contract, creating a creeping motion. A single red pixel (#ef4444) at position (3,3) creates a menacing eye. Dark navy palette (#1e293b, #374151) keeps the spider menacing.

<div class="MonsterSpider"></div>

233. Death Scorpion

Armored scorpion with tail strike — desert predator with amber stinger.

See it live on CSSKit — monster scorpion animation

How It Works

Shares the ~12px width with the spider. At 50%, bottom-row pincer pixels shift subtly, and translateY(-2px) creates a tail-raising bob. Amber stinger tips at positions (0,0) and (11,0) use #fbbf24 (bright yellow) against the dark body #a16207 and #92400e — the contrasting color makes the stinger visually pop.

<div class="MonsterScorpion"></div>

234. Mystic Owl

Wise owl with hovering idle — nocturnal seer with amber body.

See it live on CSSKit — monster owl animation

How It Works

The most compact sprite (~8×8 grid). The translateY(-2px) bob combined with the symmetric silhouette creates an owl hovering silently. Brown tones (#92400e, #78350f) throughout. The bottom feet pixels shift slightly between frames for a perching adjustment.

<div class="MonsterOwl"></div>

235. Venom Serpent

Slithering snake with coiling tail — the tallest sprite at ~10px height.

See it live on CSSKit — monster snake animation

How It Works

At 50%, the tail pixels at row 9 shift from (4,9) (5,9) to (3,9) (4,9) — the tail sways left by one pixel. Combined with translateY(-2px), this creates a slithering motion. Three green tones (#22c55e head, #16a34a body, #15803d tail) create depth along the snake's length.

<div class="MonsterSnake"></div>

236–240. More Battle Monsters

236. Cave Bear — Massive bear with standing/prowling idle. At 50%, feet pixels at row 7 shift between two positions (x=0,8 vs x=1,9), simulating a weight-shift step. Earthy brown palette: #92400e (body), #78350f (lower), #6b4f2a (claws). ~10×10 grid.

237. Deep Jellyfish — Bioluminescent jellyfish with the most dramatic animation. At 50%, tentacle pixels at rows 6-8 change significantly — tentacles retract inward (pixels disappear at some positions, appear at others). Purple palette: #c084fc (dome), #a855f7 (tentacles), #7c3aed (tips). This is the most visually active idle in the set.

238. Fungal Shroom — Poisonous mushroom with gentle hover. Both keyframes have identical pixel data — the only animation is translateY(-2px). Pure transform animation. Red cap (#dc2626, #ef4444) with white stem dots (#f1f5f9).

239. Ghost Flame — Undead fire spirit with flickering wisp. At 50%, base pixels at row 7 shift left by 1px — the flame leans as if blown by wind. Cyan palette: #67e8f9 (top), #22d3ee (body), #06b6d4 (core), #0891b2 (base).

@keyframes mgf-idle {
  0%, 100% {
    box-shadow: /* base pixels at row 7: x=1, x=8 */;
  }
  50% {
    box-shadow: /* base pixels shift to x=0, x=9 (flicker) */;
    transform: scale(var(--mgf-scale)) translateY(-2px);
  }
}

240. Crystal Golem — Living crystal construct. Both keyframes have identical pixels — pure translateY(-2px) bob animation. Four-tier cyan palette gives crystalline depth: #a5f3fc (crown), #67e8f9 (upper body), #22d3ee (lower body), #06b6d4 (feet).

Battle Monster Comparison

What's Next?

That covers the first 10 battle monsters from CSSKit. In the next post, more monsters emerge — including shadow cats, thunder birds, ice wyrms, fire salamanders, and water krakens — followed by 10 elemental dragons (fire, ice, thunder, shadow, crystal, nature, water, wind, ancient, baby emperor).

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

Originally published at abduarrahman.com

Explore all 310 animations:

• Live Demo: CSSKit
• Source Code: GitHub

Follow the project:

• Instagram: @abduarrahman
• YouTube: @abduarrahmanscode
• TikTok: @anduarrahmans

Support: Ko-fi