2D Sprite Sheet Maker

Sprite Sheet Details

Total Width (px)

Total Height (px)

Number of Frames

Duration (Seconds)

Loop Animation (infinite)

Calculated Frame Size128px × 128px

Animation Speed8.0 FPS

Generated CSS

.sprite-animation {
  width: 128px;
  height: 128px;
  background-image: url('your-sprite-sheet.png');
  animation: playSprite 1s steps(8) infinite;
}

@keyframes playSprite {
  100% { background-position: -1024px 0; }
}

How to use:

Add this CSS to your stylesheet.
Change your-sprite-sheet.png to your actual image path.
Add <div class="sprite-animation"></div> to your HTML.

Whether you are building a browser-based indie game or just adding a retro pixel-art mascot to your portfolio website, CSS sprite animations are incredibly lightweight and performant.

However, writing the exact CSS keyframes to shift the background image without weird clipping or sliding can be frustrating. Our 2D Sprite Sheet Maker calculates the precise pixel offsets and generates the `steps()` CSS code for you instantly.

How CSS Sprite Animations Work

A sprite sheet is a single image file containing multiple frames of an animation laid out in a row (or grid).

Instead of loading 10 separate images, the browser loads one image. We then create a small HTML `div` that acts as a "window", showing only the first frame. By rapidly shifting the `background-position` of the image behind the window, we create the illusion of movement.

Calculating Steps() and Keyframes

The secret to a perfect CSS sprite animation is the `steps()` timing function.

By default, if you tell CSS to animate a background from 0px to -100px, it will smoothly slide the image. This looks terrible for pixel art. The `steps(8)` function tells CSS to jump instantly between 8 distinct points along that 100px journey, snapping exactly to each frame of your character's run cycle.

Frame Rate vs. Animation Duration

In CSS, you do not set a "Frames Per Second (FPS)" directly. Instead, you set the total duration of the animation cycle.

If your sprite sheet has 12 frames, and you want it to run at 12 FPS, you would set the CSS duration to exactly 1.0 seconds. If you want it to run at 24 FPS (twice as fast), you would set the duration to 0.5 seconds. Our calculator handles this math and displays your exact resulting FPS in real-time.

Optimizing Sprites for Indie Games

When exporting your sprite sheet from Aseprite or Photoshop, ensure that every single frame is exactly the same width.

If your character is 32px wide when standing idle, but their sword thrust makes them 48px wide during an attack, you must ensure the canvas size for all frames in the attack animation is set to 48px. If your frames have varying widths, the mathematical `steps()` function will fall out of alignment and your sprite will jitter horribly.

Frequently Asked Questions

Why is my sprite animation sliding instead of jumping?

You are likely missing the `steps()` function in your CSS animation property, or it is calculating the wrong number of frames. Without `steps()`, CSS will smoothly tween the background position, causing a sliding effect rather than a frame-by-frame animation.

How do I make the animation play faster?

Decrease the 'Duration' input. If an 8-frame animation takes 1.0 seconds, it runs at 8 FPS. Changing the duration to 0.5 seconds will double the speed to 16 FPS.

Can I use this for a sprite sheet with multiple rows?

This specific generator is optimized for single-row sprite strips. For multi-row sheets, you would need to adjust the initial `background-position-y` in your CSS to target the correct row before running the horizontal animation.

Explore Other Generators

DBL Code Generator Generator

Generate functional QR codes for Shenron and Porunga events instantly.

Nintendo Switch Generator

Universal Connection Utility

Steam Friend Code Generator

Generate Steam invite links & quick add QR codes.

Discord Invite Generator

Generate scannable QR codes for your Discord server invites.