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

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.

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;
  }
}

<div class="ItemHealthPotion"></div>

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.

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>

---

298. Antidote

Green antidote with herbal glow — cures poison.

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

<div class="ItemAntidote"></div>

---

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.

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>

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

---

300. Fire Shard

Blazing fire shard — fire element crafting material.

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>

---

301. Water Shard

Deep water shard — water element crafting material.

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

<div class="ItemWaterShard"></div>

---

302. Thunder Shard

Crackling thunder shard — electric element crafting material.

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

<div class="ItemThunderShard"></div>

---

303. Shadow Shard

Void shadow shard — dark element crafting material.

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>

---

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.

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;
}

<div class="ItemMasterBall"></div>

---

305. Super Ball

Blue super ball with gold stripe — improved capture rate.

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>

---

306. Basic Ball

Classic red basic ball with white stripe — standard capture.

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>

---

Part D: Loot (#307-310)

307. XP Orb

Glowing XP orb — experience points in physical form.

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>

---

308. Gold Coin

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

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>

---

309. Dungeon Key

Enchanted dungeon key — unlocks sealed doors.

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>

---

310. Magic Scroll

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

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>

---

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.