CSS Sprite: raster sprite coordinates

CSS Sprite: an online tool for raster sprite coordinates

CSS Sprite helps you quickly read the exact coordinates of individual icons inside a raster sprite sheet and get ready CSS right away. Upload the image, hover the icon you need — the tool highlights its bounds for you — and click to copy background-position, width and height.

It is a modern alternative to the classic Sprite Cow: besides PNG it supports WebP, and the pixel multiplier can be set not only to 2×, but also 3× and 4× — for sprites drawn for high-density screens.

What the tool can do

• opens PNG and WebP sprites entirely in the browser, with no upload to a server;
• automatically detects the icon’s bounds by the alpha channel on hover;
• marquee-selection of an arbitrary area with transparent edges trimmed off;
• 1×, 2×, 3× and 4× multipliers with correct background-size for retina;
• a background-colour eyedropper, view zoom, and one-click CSS copy.

When you need a tool like this

Sprite generators are handy, but you often have to work with an already-assembled raster sheet — inherited from an old project or exported by a designer. Instead of measuring offsets and sizes by hand in a graphics editor, you can read all the coordinates in a few clicks and paste ready CSS into your project.

How the icon-bound detection works

The image is drawn on a hidden canvas, and the tool then analyses the pixel data. From the point under the cursor the bounds expand in every direction until they hit fully transparent (or single-colour — by the background colour) rows and columns. That yields the smallest rectangle that tightly wraps the icon. All the analysis happens in the browser — the file is not sent anywhere.

Questions about CSS Sprite

How do I get an icon’s CSS coordinates?
Upload the sprite, hover an icon to see its bounds, and click. Ready CSS with background-position, width and height appears and can be copied with one button.

Is WebP supported?
Yes. The tool opens both PNG and modern WebP sprites — unlike older services that could only handle PNG. The browser decodes the image, and coordinates are read pixel by pixel from the alpha channel.

Why the 2×, 3×, 4× multipliers?
If the sprite is drawn at double, triple or quadruple density, choose the matching multiplier. The coordinates are divided by it, and background-size is added to the CSS for correct rendering on retina.

This is one more tool in the section — all the utilities are gathered on the online tools page.