Sprite Outliner
Add a pixel outline and a drop shadow to one sprite or two hundred at once. Choose whether the corners fill in, keep the canvas size or let it grow, and take the lot away as a ZIP. Free, no sign-up, and every pixel stays in your browser.
Nothing is uploaded — every sprite is redrawn inside your browser.
How to outline a set of sprites
Three settings, and one of them decides what the corners look like.
- 1Drop the sprites inOne file or a whole folder. They need a transparent background — an outline follows the edge of the silhouette, and a sprite on an opaque rectangle has no silhouette but the rectangle.
- 2Pick the corner styleCross leaves the diagonal corners open, square fills them in. Compare them at 1px and the difference is obvious.
- 3Decide whether the canvas may growOn for loose sprites, off for frames that have to stay on a sheet's grid.
- 4DownloadOne sprite comes out as a PNG, several as a ZIP, and the file names are kept.
Cross or square: the only interesting decision
An outline is the silhouette grown outwards by one step, and “one step” has two reasonable meanings. Grow into the four cardinal neighbours and the diagonal corners of a shape stay uncovered — where two edges meet at a right angle, the outline has a notch. Grow into all eight and the notch fills in.
For a single-pixel outline, most pixel artists want the cross. The square version puts two pixels of outline diagonally across a corner where the rest of the outline is one, so the frame reads as slightly thicker exactly where the eye is already reading a hard edge. The cross keeps the weight even.
At two pixels and above it swings the other way: a cross-grown outline of thickness three is a visible diamond, and the square version stays rectangular. Try both — it is one click, and the preview shows the sprite you actually have rather than the one in a tutorial.
Growing the canvas, and when not to
An outside outline needs somewhere to go. If the sprite already touches the edge of its image, that somewhere does not exist, and the outline is simply clipped along that side — which usually looks like a bug rather than a decision.
So growing is on by default: the canvas gains the outline's thickness on every side and the shadow's offset in the direction it falls, and nothing is lost.
Turn it off when the size is load-bearing. A frame that came out of a sprite sheet has to go back into the same grid; an icon has to stay 32×32; a tile has to tile. In those cases the fix is not to grow the image but to draw the sprite a pixel smaller, leaving the margin the outline needs — or to use an inside outline, which never changes the size at all.
When you need this
Readability against a busy background
A dark outline is the standard fix for a sprite that disappears into a tilemap. It is also the fastest thing to try before repainting anything.
A whole asset pack at once
Outlining forty sprites by hand in an editor is forty repetitions of the same six clicks. This is the same six clicks, once.
Trying a look before committing
Outline colour, thickness and corner style are all one click apart here, and none of it touches the original files.
UI icons that need to sit on any colour
An outline plus a soft drop shadow makes an icon legible on light and dark backgrounds without two sets of art.
Before you outline
Check the alpha. An outline follows every edge of the silhouette, including around holes. If an outline appears somewhere inside the sprite, there is a transparent or nearly transparent area there — which is worth knowing whether or not you wanted the outline.
Outline before scaling, not after. A one-pixel outline scaled up 4× is a four-pixel outline. If the sprite is going to be enlarged, either outline after enlarging, or let the engine do the scaling at draw time. The pixel art resizer scales by whole factors with nearest-neighbour sampling, which keeps the outline even either way.
Outline the frames, not the sheet. Running this over a whole sprite sheet outlines the sheet's contents as one silhouette, including across the gaps between frames. Cut the sheet first, outline the frames, then pack them again.
Frequently asked questions
Why does the corner of my outline look wrong?
That is the neighbourhood setting. Growing the silhouette in the four cardinal directions leaves the diagonal corners of a shape uncovered, which reads as a rounded corner. Growing it in all eight fills them in, which reads as a square one. Neither is a bug — a one-pixel outline usually wants the cross, because the square version thickens exactly at the corners where the eye is already reading a hard edge.
Will the outline change the size of my sprite?
An outside outline needs a pixel of room on every side, so with “grow the canvas” on the image gets that much bigger. Turn it off and the size stays exactly the same, with the outline clipped where it runs off the edge. Frames that have to stay on a sheet's grid want it off.
What is an inside outline for?
It draws the outline in the sprite's own edge pixels instead of around them, so the silhouette never changes size at all. Useful when the artwork already fills its frame, and for a hard rim-light look where the outline replaces the outermost row of colour.
Can it do a whole folder at once?
Yes — drop as many files as you like, or pick a folder, and every one gets the same treatment. Up to two hundred, downloaded as a ZIP. One file downloads as a plain PNG.
Does the shadow follow the outline or the sprite?
The outline. The shadow is cast by the shape you can see, which is the sprite plus its outline — a shadow of the bare sprite peeking out from underneath its own outline is the artefact this ordering avoids.
Why is my outline appearing inside the sprite where I did not want it?
Something in the middle of the sprite is transparent, or nearly so. An outline follows every edge of the silhouette, including the inside of a hole. If the hole is meant to be there, that outline is correct; if it came from a partly transparent pixel you did not know about, the alpha in that area is not what you think it is.
Are my images uploaded to a server?
No. Every sprite is decoded and redrawn with the Canvas API inside your browser. Nothing leaves your machine, and the tool keeps working offline once the page has loaded.
Related guides
Related tools
Sprite Sheet Cutter
LiveSplit a sprite sheet into individual PNG frames by grid, auto-detection or an Aseprite JSON, then download them as a ZIP.
Sprite Sheet Generator
LivePack individual frames into one sprite sheet atlas, with a TexturePacker JSON manifest.
Sprite Animation Previewer
LivePlay a sprite sheet at any FPS — or with Aseprite's own per-frame timing and tags — and export a GIF.
Pixel Art Resizer
LiveScale pixel art 2x / 4x / custom with nearest-neighbour — no blurring.
Browse everything on the game asset tools page.