Sprite CSS Generator

Upload a spritesheet, select a sprite region, and get the exact CSS code to display it.

X LinkedIn

100%

Drag and drop your spritesheet here

Supports PNG, JPEG, SVG, WebP

How to Use

Upload your spritesheet image (drag & drop or click Browse Files)
Click and drag on the image to select a sprite region
Use "Detect All" to find all sprites, then click thumbnails to select
Copy the generated CSS code

Output

CSS

/* Select a sprite region to generate CSS */

Frequently Asked Questions

Yes, this tool is completely free to use. Generate CSS for unlimited sprite sheets without any restrictions.

No, all image processing happens locally in your browser. Your sprite sheets never leave your device.

Click to upload or drag and drop your sprite sheet image (PNG works best). Click and drag on the image to select the specific sprite you want. Enter the width and height of your sprite frames if they are uniform. Then copy the generated CSS code with background-image, background-position, and size properties to use in your stylesheet.

PNG, JPG, GIF, and WebP formats are all supported. PNG with transparency is recommended for best results with web sprites.

Was this helpful?

Related Tools

Border Radius Generator

Design custom border radius with asymmetric corners

Shadow Generator

Create layered box shadows with CSS and Tailwind output

CSS to Tailwind

Convert CSS styles to Tailwind utility classes

All Tools