CSS Sprites Online - The best CSS sprite generator.

Step 2: Choose Options

Basic Output Options

Class Prefix (optional): cannot start with a number

Output Format:

Horizontal Offset: px

Vertical Offset: px

Show more options

Image Duplicates

Ignore duplicate images

Remove duplicate images but merge CSS rules

Resize Source Images

Width: %

Height: %

Sprite Output Options

Build Direction:

Wrap columns to fix Opera bug:

Background / Transparency Colour # (optional): If left blank white will be used for non-transparent images, black for transparent

Use Background Colour for Transparency:

Number of Colours:

Image Quality: %

Compress Image with OptiPNG:

CSS Output Options

CSS Prefix (optional): CSS to insert before the class name

Filename Pattern Match (optional): e.g. icon-([0-9]+).png - matches the numeric part of each filename and uses this for the class names in the generated CSS

CSS Suffix (optional): CSS to insert after the class name

Display width and height (optional): Provides the height and width of each sprite in the CSS.

Show less options

CSS Sprites

Step 1: Upload Your Images(ZIP)