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.

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

<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.

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>

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>

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>

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>

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>

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>

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>

Shard Color Reference

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

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

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

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>

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>

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>

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>

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>

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>

Battle Item Comparison

That's All 310 Animations!

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

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:

• Live Demo: CSSKit
• Source Code: GitHub

Follow the project:

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

Support: Ko-fi