DEV Community

Muhammad Abdu ar Rahman
Muhammad Abdu ar Rahman

Posted on • Originally published at abduarrahman.com

CSS Pixel Art Battle Items — Potions, Shards, Balls & Loot with Code

#css #animation #showdev #pixelart

Try them live — All 15 battle items are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Terrain Tiles, Weather & Sky.

Every hero needs an inventory! Battle items are the collectible sprites of a monster-taming game — potions, antidotes, crystals, elemental shards, capture balls, XP orbs, gold coins, keys, and scrolls. This is the final post covering all 310 CSSKit animations. All built with the same box-shadow technique on a single <div>.

Item Animation Pattern

All 15 items use the simplest animation — a pure opacity pulse:

0%, 100%  →  Full opacity (1.0) — item fully visible
50%       →  Opacity drops to 0.85 — gentle glow pulse
Enter fullscreen mode Exit fullscreen mode

Combined with drop-shadow filters, this creates a "breathing" glow that makes items feel magical. All items use 2.5x scale, 2s speed, and ease-in-out infinite.

Part A: Potions (#296-298)

Three potion bottles sharing the same silhouette — only the color palette changes per type. Each is ~8×10 pixels with a tapered cap (4px wide), wide body (8px), and tapered base (4px).

296. Health Potion

Red health potion with bubbling glow — restores HP.

See it live on CSSKit — item health potion animation

How It Works

A bottle-shaped pixel art sprite with three red tones: #fecaca (light cap), #ef4444 (red body), #dc2626 (dark base). The opacity pulse at 50% combined with the drop-shadow(0 0 3px #ef4444) creates a bubbling liquid effect.

.ItemHealthPotion {
  --ihp-speed: 2s;
  --ihp-scale: 2.5;
  --ihp-glow: #ef4444;
  width: 1px;
  height: 1px;
  position: relative;
  left: -28px;
  top: -28px;
  transform: scale(var(--ihp-scale));
  filter: drop-shadow(0 0 3px var(--ihp-glow));
  animation: ihp-anim var(--ihp-speed) ease-in-out infinite;
}

@keyframes ihp-anim {
  0%, 100% {
    box-shadow:
      /* cap */ 2px 0px #fecaca, 3px 0px #fecaca, 4px 0px #fecaca, 5px 0px #fecaca,
      /* body */ 0px 3px #ef4444, 1px 3px #ef4444, /* ... 8px wide */ ,
      /* base */ 2px 8px #dc2626, 3px 8px #dc2626, 4px 8px #dc2626, 5px 8px #dc2626;
  }
  50% {
    box-shadow: /* identical */;
    opacity: 0.85;
  }
}
Enter fullscreen mode Exit fullscreen mode 
<div class="ItemHealthPotion"></div>
Enter fullscreen mode Exit fullscreen mode

Customize: --ihp-speed (0.5-8s), --ihp-scale (1.5-4x), --ihp-glow (glow color).

297. Mana Potion

Indigo mana potion with swirling energy — restores MP.

See it live on CSSKit — item mana potion animation

Same bottle silhouette — only colors change. Indigo palette: #c7d2fe (cap), #6366f1 (body), #4f46e5 (base). The purple glow creates a "swirling magic" feel.

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

298. Antidote

Green antidote with herbal glow — cures poison.

See it live on CSSKit — item antidote animation

Same bottle shape, slightly shorter (~8×9). Green palette: #bbf7d0 (cap), #22c55e (body), #16a34a (base). Green glow simulates herbal bubbling.

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

Part B: Crystals & Shards (#299-303)

Five diamond-shaped items sharing the same silhouette (~10×9 pixels). Each tapers to a point at top (2px) and bottom (4px), widest in the middle (10px).

299. Revive Crystal

Golden revive crystal — revives fallen monsters.

See it live on CSSKit — item revive crystal animation

How It Works

Diamond/gem shape with a waist at row 6 using darker amber #d97706, giving it a gem-like silhouette. Four amber tones: #fef9c3 (tip highlights), #fbbf24 (crystal faces), #f59e0b (body), #d97706 (waist). The opacity pulse makes it feel like pulsing energy.

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

Colors: #fef9c3 / #fbbf24 / #f59e0b / #d97706 — amber gradient.

300. Fire Shard

Blazing fire shard — fire element crafting material.

See it live on CSSKit — item fire shard animation

Same diamond silhouette with flame gradient: #fef08a (yellow tip), #f97316 (orange), #ef4444 (red body), #dc2626 (dark base). The color flows from yellow→orange→red like a real flame. Red glow.

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

301. Water Shard

Deep water shard — water element crafting material.

See it live on CSSKit — item water shard animation

Blue gradient: #a5f3fc (cyan tip), #0ea5e9 (sky blue), #0284c7 (deep blue), #0369a1 (dark base). Cyan glow creates a ripple feel.

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

302. Thunder Shard

Crackling thunder shard — electric element crafting material.

See it live on CSSKit — item thunder shard animation

Yellow gradient: #fef9c3 (pale tip), #eab308 (gold), #ca8a04 (dark gold), #a16207 (amber base). Yellow glow simulates electric spark pulsing.

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

303. Shadow Shard

Void shadow shard — dark element crafting material.

See it live on CSSKit — item shadow shard animation

Violet gradient: #d8b4fe (light violet tip), #8b5cf6 (violet), #7c3aed (deep purple), #6d28d9 (dark base). Purple glow creates a dark pulse feel.

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

Shard Color Reference

All 5 shards share the same diamond silhouette — only the palette changes:

Shard Tip Upper Mid Base Glow
Revive #fef9c3 #fbbf24 #f59e0b #d97706 Amber
Fire #fef08a #f97316 #ef4444 #dc2626 Red
Water #a5f3fc #0ea5e9 #0284c7 #0369a1 Cyan
Thunder #fef9c3 #eab308 #ca8a04 #a16207 Yellow
Shadow #d8b4fe #8b5cf6 #7c3aed #6d28d9 Violet

Creating a custom shard: Copy any shard CSS, replace the 4 color values, update the glow color. The pixel art stays identical.

Part C: Capture Balls (#304-306)

Three capture balls sharing the same 12×8 dome shape — the widest items in the set.

304. Master Ball

Legendary purple master ball — guaranteed capture.

See it live on CSSKit — item master ball animation

How It Works

A rounded dome shape — wider at top (12px), narrower at bottom (6px). Purple palette: #c084fc (dome highlight), #a855f7 (dome body), #7c3aed (mid band), #6d28d9 (bottom dome). The opacity pulse creates a "ready to throw" glow.

.ItemMasterBall {
  --imb-speed: 2s;
  --imb-scale: 2.5;
  --imb-glow: #a855f7;
  width: 1px;
  height: 1px;
  transform: scale(var(--imb-scale));
  filter: drop-shadow(0 0 3px var(--imb-glow));
  animation: imb-anim var(--imb-speed) ease-in-out infinite;
}
Enter fullscreen mode Exit fullscreen mode 
<div class="ItemMasterBall"></div>
Enter fullscreen mode Exit fullscreen mode

305. Super Ball

Blue super ball with gold stripe — improved capture rate.

See it live on CSSKit — item super ball animation

Same dome shape with a distinctive yellow/gold stripe band (rows 4-5) separating the blue top from the dark blue bottom. Colors: #3b82f6 (blue dome), #fef08a/#ffd700 (gold stripe), #1d4ed8 (dark base).

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

306. Basic Ball

Classic red basic ball with white stripe — standard capture.

See it live on CSSKit — item basic ball animation

The classic design — red dome with white stripe. Colors: #ef4444 (red dome), #f1f5f9/#e2e8f0 (white stripe), #dc2626 (dark red base). Red glow.

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

Part D: Loot (#307-310)

307. XP Orb

Glowing XP orb — experience points in physical form.

See it live on CSSKit — item xp orb animation

How It Works

A tapered teardrop orb — narrow at top (2px), widest at rows 3-4 (10px), tapering to just 2px at the bottom. Monochromatic cyan palette: #a5f3fc (highlight), #22d3ee (body), #06b6d4 (lower), #0891b2 (tip). The cyan glow makes it feel like pure experience energy.

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

308. Gold Coin

Shiny gold coin — the smallest item sprite at 8×6.

See it live on CSSKit — item gold coin animation

How It Works

A rectangular coin with a checkerboard pattern of alternating #f59e0b and #fbbf24 pixels — this creates a shimmering metallic look. Pale yellow #fef9c3 edges frame the top and bottom like a coin rim. Compact 8×6 sprite.

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

309. Dungeon Key

Enchanted dungeon key — unlocks sealed doors.

See it live on CSSKit — item key animation

How It Works

The only item with 4 distinct color zones stacked vertically: cyan head (#22d3ee, 8px wide) → gold shoulder (#fbbf24) → amber shaft (#d97706, 2px wide) → brown teeth (#b45309, 4px wide). The cyan glow represents an enchanted gem set in the key's bow. Tallest item at ~8×9.

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

310. Magic Scroll

Ancient magic scroll with unfurling shape — the final animation (#310).

See it live on CSSKit — item scroll animation

How It Works

The most unique shape — a progressive widening triangle that represents an unfurling scroll. Each row is 1px wider than the last: row 0 is 1px, row 9 is 10px. This diagonal silhouette reads as parchment unfurling. Monochromatic gold: #fef9c3 (cream roll), #fde68a (upper body), #fbbf24 (lower body), #f59e0b (edge). Largest bounding box at 10×10.

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

Battle Item Comparison

# Item Grid Shape Color Theme Glow
296 Health Potion 8×10 Bottle Red #ef4444
297 Mana Potion 8×10 Bottle Indigo #6366f1
298 Antidote 8×9 Bottle Green #22c55e
299 Revive Crystal 10×9 Diamond Amber #fbbf24
300 Fire Shard 10×9 Diamond Red/orange #ef4444
301 Water Shard 10×9 Diamond Blue/cyan #0ea5e9
302 Thunder Shard 10×9 Diamond Yellow/gold #eab308
303 Shadow Shard 10×9 Diamond Violet #8b5cf6
304 Master Ball 12×8 Dome Purple #a855f7
305 Super Ball 12×8 Dome Blue + gold stripe #3b82f6
306 Basic Ball 12×8 Dome Red + white stripe #ef4444
307 XP Orb 10×8 Teardrop Cyan #22d3ee
308 Gold Coin 8×6 Rectangle Gold checkerboard #fbbf24
309 Dungeon Key 8×9 Vertical key Cyan + amber #22d3ee
310 Magic Scroll 10×10 Unfurling triangle Cream/gold #fbbf24

That's All 310 Animations!

This post completes the entire CSSKit collection — 310 CSS animations across 21 blog posts:

Batch Posts Category Count
1 1-2 Text Animations 20
2 3-4 Hover Effects 24
3 5-6 Loading Animations 24
4 7-8 Background Effects 22
5 9-10 Entrance & Exit + Buttons 52
6 11-12 Attention + Cards & Dividers 46
7 13 Pixel Art Classics 22
8 14-15 Eggs & Baby Monsters 20
9 16-17 Battle Monsters & Dragons 30
10 18-19 Environment & Weather 25
11 20-21 Terrain & Battle Items 25

Total: 21 blog posts, 310 animations, pure CSS.

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)