All Tools
1049+ free tools

Sprite Sheet Calculator

Compute sprite-sheet dimensions and CSS background-position rules.

256px
Sheet width
256px
Sheet height
16
Total tiles
64.0K
px² (k)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.sprite { width: 64px; height: 64px; background: url(sprite.png) no-repeat; }
.sprite-1 { background-position: -0px -0px; }
.sprite-2 { background-position: -64px -0px; }
.sprite-3 { background-position: -128px -0px; }
.sprite-4 { background-position: -192px -0px; }
.sprite-5 { background-position: -0px -64px; }
.sprite-6 { background-position: -64px -64px; }
.sprite-7 { background-position: -128px -64px; }
.sprite-8 { background-position: -192px -64px; }

Related design tools

Accessibility Checker
WCAG contrast & accessibility compliance checker
Color Wheel
Interactive HSL color wheel — click to pick hue and saturation.
Color Picker
Pick a color and get HEX, RGB, and HSL values instantly.
Palette Generator
Generate random color palettes in 5 styles.