DEV Community

Muhammad Abdu ar Rahman
Muhammad Abdu ar Rahman

Posted on • Originally published at abduarrahman.com

CSS Pixel Art Monsters Part 2 & Dragons — 20 Creatures with Code

#css #animation #showdev #pixelart

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.

See it live on CSSKit — monster shadow cat animation

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

242. Thunder Bird

Majestic sky lord with sparking yellow wings.

See it live on CSSKit — monster thunder bird animation

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

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.

See it live on CSSKit — dragon fire animation

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);
  }
}
Enter fullscreen mode Exit fullscreen mode 
<div class="DragonFire"></div>
Enter fullscreen mode Exit fullscreen mode

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.

See it live on CSSKit — dragon ice animation

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

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.

Originally published at abduarrahman.com

Explore all 310 animations:

Follow the project:

Support: Ko-fi

Top comments (0)