DEV Community

Muhammad Abdu ar Rahman
Muhammad Abdu ar Rahman

Posted on • Originally published at abduarrahman.com

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

#css #animation #showdev #pixelart

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

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.

See it live on CSSKit — pixel bat animation

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;
}
Enter fullscreen mode Exit fullscreen mode 
<div class="pixel-bat-body"></div>
Enter fullscreen mode Exit fullscreen mode

190. Pixel Heart

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

See it live on CSSKit — pixel heart animation

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

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

191. Pixel Star

Golden twinkling star with 2-frame color swap.

See it live on CSSKit — pixel star animation

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

192. Pixel Sword

RPG sword with gleaming blade — the metallic shine effect.

See it live on CSSKit — pixel sword animation

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

193. Pixel Coin

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

See it live on CSSKit — pixel coin animation

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 */
Enter fullscreen mode Exit fullscreen mode 
<div class="pixel-coin"></div>
Enter fullscreen mode Exit fullscreen mode

194. Pixel Skeleton

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

See it live on CSSKit — pixel skeleton 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>
Enter fullscreen mode Exit fullscreen mode

195. Pixel Mushroom

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

See it live on CSSKit — pixel mushroom animation

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

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

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.

Originally published at abduarrahman.com

Explore all 310 animations:

Follow the project:

Support: Ko-fi

Top comments (0)