CSS sprite creator for image regions and background positions
Create CSS classes for individual images within an existing sprite sheet. Move or resize each selection with handles and manage your named sprites in the list. Copy or download all the CSS below the editor.
Loading the tool…
What is a CSS sprite?
A sprite sheet contains several small images in one file. CSS displays one region at a time by giving an element a width, height, and background position. This tool helps you measure those regions and write the matching rules for an existing sheet; it does not combine separate images into a new sheet.
Using the generated CSS
The tool generates a class with the selected width, height, and negative background offsets. Apply it to an element, for example <span class="my-icon" aria-hidden="true"></span> for a decorative icon. Keep meaningful labels in nearby text or provide an accessible name when an icon is the only content of a control.
The image must retain its original pixel dimensions for the generated coordinates to align. This tool selects regions from a sheet you already have; it does not combine separate files or alter the original image. Use static images for predictable results.
CSS and HTML example
For a 32 by 32 pixel icon whose top-left corner is at X = 64 and Y = 0, use a background position of -64px 0px. Change the class name and image path to match your sheet.
.icon-home {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("../images/sprites.png");
background-repeat: no-repeat;
background-position: -64px 0px;
}
Use the class beside a visible label. In this example the icon is decorative because the link already has text:
<a href="/">
<span class="icon-home" aria-hidden="true"></span>
Home
</a>
How to use this tool
- Try the sample or choose Load image. The 503 by 304 sample starts with a 75 by 75 selection at X = 175 and Y = 75. To use your own sheet, select Load image before the Fit/100% controls and confirm replacement. PNG, JPEG, and WebP images can be up to 10 MB, 8192 pixels per side, and 16 million pixels in total. Each loaded sheet starts with one sprite.
- Adjust its region. Drag inside the rectangle to move it, or use its eight edge and corner handles to resize it. Drag outside the rectangle to replace the selected sprite’s region. The coordinates, list, and CSS update together.
- Manage the sprite list. Add sprite creates and selects a 75 by 75 pixel sprite, or smaller if the sheet is smaller. Rename changes the selected sprite’s CSS class name. Delete removes it; the last remaining sprite cannot be deleted. Select any list row to restore its current region for editing.
- Set the image path if needed. Expand Options below the image in the left column and enter Image path in CSS, relative to your stylesheet, for example
../images/sprites.png. - Use the full CSS below. Select Copy CSS or Download CSS for every sprite in the list. Publish the original image at the configured path and keep its original dimensions.
Preview size and precise coordinates
Fit displays the whole sheet within the preview area. 100% displays original pixels with horizontal and vertical scrollbars when needed, making small selections easier to adjust. Selecting a list row brings its region into view at 100%.
Beside the preview, Position shows X and Y, and Size shows width and height. Click or keyboard-activate a dotted-underlined value to edit it. Press Enter to finish or Escape to restore its previous value. All values use original image pixels. X and Y start at the top-left corner. A 32 by 32 icon at X = 64 and Y = 0 uses values 64, 0, 32, and 32.
When the sheet has focus, arrow keys move the selection by one pixel; hold Shift to move ten pixels. Escape cancels an active drag. Shift-drag starts a replacement rectangle even inside the current selection. You can also use the numeric fields for all movement and resizing.
Names and saved selections
Each valid coordinate change is kept in the selected list item immediately. Invalid coordinates show an error and retain that item’s last valid CSS until corrected. The list supports up to 100 sprites, with unique class names starting with a letter or underscore and containing letters, digits, underscores, and hyphens, up to 100 characters.
Selections are kept only for the current session. Load image warns before opening the file picker because replacing the image also replaces every sprite and the generated CSS. Cancelling the warning or file picker leaves your work intact, and an invalid file does not replace it. Loading a valid image starts a new list with one default sprite; reloading the page returns to the sample. Copy or download the CSS before replacing the sheet or leaving the page.
Your tool data stays in your browser
This tool processes your data on your device. The text, files, or passwords you enter and the results it creates are not sent to our servers or any other server.
Page and asset requests still occur. Production pages also load Google Tag Manager and AdSense advertising; tool code does not send inputs or results to analytics or ads. See our privacy policy.
To inspect requests while using the tool, open your browser's developer tools and select Network. Try it with sample data.
Read How to check website network requests in Chrome, Firefox, Edge, and Safari.
Learn more and references
- MDN: implementing image sprites - how element sizes and background positions select a region of a sheet, and when sprites may be useful.