CSS Pixel Art — Box-Shadow Technique, 22 Effects with Code

Try them live — All 22 pixel art animations are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Card & Divider Animations.

---

This post introduces the CSS box-shadow pixel art technique — drawing game sprites using nothing but CSS box-shadow. No images, no JavaScript, no canvas. Each sprite is a single <div> element, and every “pixel” is a box-shadow offset. Animation is achieved by swapping box-shadow values between keyframes.

---

The Technique: How Box-Shadow Pixel Art Works

Before diving into the sprites, here’s the core concept:

.pixel-sprite {
  width: 1px;
  height: 1px;        /* A single pixel element */
  transform: scale(3); /* Scale up so 1px becomes 3px */
  box-shadow:
    0px 0px #ff0000,   /* Pixel at (0,0) - red */
    1px 0px #ff0000,   /* Pixel at (1,0) - red */
    0px 1px #ff0000,   /* Pixel at (0,1) - red */
    1px 1px #ff0000;   /* Pixel at (1,1) - red */
}

Each Xpx Ypx #color in box-shadow paints one pixel at that coordinate. The transform: scale(3) makes each 1px pixel appear as a 3×3 block on screen. Animation works by defining different box-shadow values in @keyframes — CSS transitions between them.

Two timing strategies:

• steps(1) — Hard frame cuts (authentic retro feel)
• ease-in-out — Smooth interpolation (organic motion)

---

189. Pixel Bat

Detailed bat with 8-frame wing flap — the most complex sprite in the collection.

How It Works

The bat uses an 8-frame animation cycle at 0.4s steps(1) infinite. Each keyframe (0%, 14%, 28%, 42%, 57%, 71%, 85%, 100%) contains a complete set of box-shadow values representing a different wing position. The wings sweep through a full flap cycle. Colors: #54556b (body/wing), #202020 (dark details), #ff6b6b (red eyes). The 1px element is scaled 3× with large offsets (left: -96px; top: -96px) for this large sprite.

.pixel-bat-body {
  width: 1px;
  height: 1px;
  transform: scale(3);
  animation: pb-flap 0.4s steps(1) infinite;
}

<div class="pixel-bat-body"></div>

---

190. Pixel Heart

Heartbeat pulse — the simplest animation technique (scale only, same pixels).

How It Works

This is the easiest pixel art animation to understand. The box-shadow pixel data stays identical across all keyframes — only the scale value changes. At 0% it’s scale(4), at 15% it pulses to scale(4.3), back to scale(4) at 30%, a smaller pulse scale(4.15) at 45%, then settles at 60%. This creates a realistic double-beat heartbeat pattern.

.pixel-heart {
  width: 1px;
  height: 1px;
  left: -24px;
  top: -24px;
  transform: scale(4);
  animation: ph-beat 1s ease-in-out infinite;
}

@keyframes ph-beat {
  0%, 100% {
    box-shadow:
      2px 0px #ff6b81, 3px 0px #ff6b81,
      6px 0px #ff6b81, 7px 0px #ff6b81,
      1px 1px #ff4757, 2px 1px #ff4757,
      3px 1px #e74c3c, 4px 1px #e74c3c,
      /* ... all heart pixels ... */
      4px 8px #c0392b, 5px 8px #c0392b;
  }
  15% { transform: scale(4.3); /* Same pixels, bigger */ }
  30% { transform: scale(4); }
  45% { transform: scale(4.15); }
  60% { transform: scale(4); }
}

<div class="pixel-heart"></div>

Colors: #ff6b81 (highlight pink), #ff4757 (bright red), #e74c3c (main body), #c0392b (dark tip).

---

191. Pixel Star

Golden twinkling star with 2-frame color swap.

How It Works

Uses steps(1) timing for a hard-cut between two frames. Frame 1 has normal gold colors (#f9e547, #f1c40f, #d4a017), while frame 2 swaps certain pixels to white #ffffff — creating a sparkle highlight that blinks on and off.

.pixel-star {
  width: 1px;
  height: 1px;
  transform: scale(4);
  animation: ps-twinkle 0.8s steps(1) infinite;
}

<div class="pixel-star"></div>

---

192. Pixel Sword

RPG sword with gleaming blade — the metallic shine effect.

How It Works

Two frames with ease-in-out timing. Frame 1: blade pixels are #ecf0f1 (light steel) and #bdc3c7 (medium steel). Frame 2: all blade pixels shift to #ffffff (pure white flash) with scale(3.1) — creating a gleaming shine. The gold crossguard (#f1c40f) and brown grip (#8b4513) stay consistent.

.pixel-sword {
  width: 1px;
  height: 1px;
  left: -20px;
  top: -36px;
  transform: scale(3);
  animation: psword-gleam 1.2s ease-in-out infinite;
}

<div class="pixel-sword"></div>

---

193. Pixel Coin

Spinning gold coin with 4-frame rotation — simulating 3D spin in 2D.

How It Works

This is a brilliant trick: 4 keyframes (0%, 33%, 66%, 100%) show the coin at different widths. Frame 1 (0%): full circle, 8×8 pixels. Frame 2 (33%): narrower, ~6×8 pixels. Frame 3 (66%): thinnest, ~2×8 pixels (edge-on). Frame 4 (100%): back to full. This shrinking/expanding of the pixel grid creates a convincing 3D rotation illusion using only 2D pixel data.

.pixel-coin {
  width: 1px;
  height: 1px;
  transform: scale(3);
  animation: pcoin-spin 0.9s steps(1) infinite;
}
/* 0% = full face, 33% = angled, 66% = edge-on, 100% = full face */

<div class="pixel-coin"></div>

---

194. Pixel Skeleton

Walking skeleton with 2-frame leg swap — classic RPG enemy animation.

How It Works

Only the bottom rows (legs) change between frames. The upper body (skull, torso, arms) stays identical across both keyframes. This is the classic sprite animation technique — only animate the parts that move. Uses steps(1) for hard frame cuts at 0.6s, creating a brisk walk cycle. Colors: #e2e8f0 (light bone) and #94a3b8 (dark bone outline).

<div class="pixel-skeleton"></div>

---

195. Pixel Mushroom

Mario-style power-up with squash-and-stretch bounce.

How It Works

Combines three techniques simultaneously: (1) translateY(-4px) to bounce up, (2) scale(3) to scale(3.1) for squash-stretch, and (3) pixel-level changes where the cap spots shift by 1px. Uses ease-in-out for organic bounce. Colors: #ef4444 (red cap), #fef3c7 (cream spots), #92400e (brown stem).

<div class="pixel-mushroom"></div>

---

196–210. More Pixel Art Sprites

196. Pixel Potion — RPG magic potion with 2-frame bubble effect. A single highlight pixel (#c084fc) appears and disappears at (1px, 3px), simulating a bubble rising in purple liquid (#a855f7). Uses steps(1) at 0.8s.

197. Pixel Cherry — Pair of cherries with bounce. Uses ease-in-out with translateY(-3px) and stem pixels shifting up one row. Colors: red cherries (#ef4444), green stems (#22c55e).

198. Pixel Alien — Space Invader alien with arm animation. Two frames swap between arms-down and arms-up positions, exactly like the original arcade game. Green (#22c55e) body, black (#000000) eyes. Uses steps(1) for authentic frame-snapping.

199. Pixel Sword & Shield — RPG shield with metallic gleam. Edge colors alternate between #64748b (dark) and #cbd5e1 (light) with a subtle scale(3.08) pulse. Uses ease-in-out for smooth shimmer.

200. Pixel Diamond — Cyan gemstone with sparkle. White (#ffffff) sparkle pixels appear at different positions across the diamond facets between frames. Uses steps(1) for snappy glitter. Colors: #67e8f9, #06b6d4, #0891b2.

201. Pixel Crown — Golden crown with shimmer. Gold shifts between #fbbf24 and #fde68a, gemstones alternate red (#ef4444) and pink (#ff6b81), with scale(3.1) pulse. Uses ease-in-out.

202. Pixel Ghost — Pac-Man style ghost with floating bob. The bottom row alternates between two zigzag patterns (creating a wavy tentacle effect) while translateY(-6px) creates the float. Colors: #f1f5f9 (body), #1e293b (eyes).

@keyframes pgh-float {
  0%, 100% {
    box-shadow: /* full ghost with zigzag bottom */;
    transform: scale(3) translateY(0);
  }
  50% {
    box-shadow: /* ghost with different bottom row */;
    transform: scale(3) translateY(-6px);
  }
}

203. Pixel Dragon — Complex dragon with 3-frame fire breath. Frame 1: body only. Frames 2-3: progressively larger flame pixels (yellow/orange/red) extend from the mouth. Uses steps(1) for frame-by-frame fire animation. Multiple green shades for the body. Has a drop-shadow filter for red glow.

204. Pixel Spaceship — Spacecraft with thrust flame. Frame 1: ship body. Frame 2: yellow/orange thrust pixels appear below engines with translateY(-2px) upward nudge. Uses steps(1) with golden drop-shadow.

205. Pixel Robot — Mech robot with waving arm. Frame 2 shifts the left arm pixels upward and outward. Cyan (#22d3ee) glowing eyes with drop-shadow filter for glow effect. Uses steps(1).

206. Pixel Cat — Cute cat with tail wag. Frame 2 adds tail pixels extending from the lower-right body with translateY(-1px) bounce. Uses smooth ease-in-out timing. Colors: orange body, green eyes, pink mouth.

207. Pixel Slime — RPG blob with squish bounce. The most transform-heavy sprite: frame 1 is squished (scaleX(1.1) scaleY(0.9)), frame 2 is stretched (scaleX(0.9) scaleY(1.1)) with translateY(-6px) jump. Green body with drop-shadow glow.

208. Pixel Treasure — Chest with opening animation. 3-phase cycle: closed (0-20%) → open with gold coins (40-60%) → closed again (80-100%). The lid pixels disappear, coin pixels appear inside. Uses ease-in-out.

209. Pixel Bomb — Retro bomb with fuse spark. Frame 2 replaces gray fuse pixels with bright yellow/orange spark, intensifies drop-shadow from 3px to 8px spread for a flash. Uses steps(1).

210. Pixel Tree — Nature tree with wind sway. The canopy pixels shift 1px left while the trunk stays static, plus translateX(2px) for a wind sway illusion. Multiple green shades (#22c55e, #16a34a, #15803d). Uses ease-in-out.

---

Pixel Art Animation Cheat Sheet

Technique	How It Works	Example
Scale pulse	Same pixels, change scale()	Heart beat
Color swap	Same positions, different colors	Star twinkle, Sword gleam
Pixel shift	Change which pixels appear	Skeleton walk, Alien arms
Width morph	Narrower/wider pixel grid	Coin spin
Transform move	translateY/translateX with same art	Ghost float, Tree sway
Squash-stretch	scaleX/scaleY inverse	Slime bounce
Multi-frame	3+ distinct keyframes	Bat flap, Dragon fire

Pro tips:

• Use steps(1) for authentic retro frame-cut animations
• Use ease-in-out for organic, smooth motion
• Only change the pixels that move between frames (optimizes CSS size)
• drop-shadow filter adds glow effects to pixel art
• left/top negative offsets center the sprite after scaling

---

What’s Next?

That covers all 22 classic pixel art sprites from CSSKit. In the next post, we’ll create elemental eggs — pixel art eggs with hatching animations for fire, water, grass, electric, dark, ice, psychic, earth, wind, and light elements.

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