Sprite Normal Map Generator

To make a normal map for a 2D sprite, drop a PNG with a transparent background below. The tool reads the outline, rounds the edges into a soft bevel and adds detail from the colours. Move your pointer to test it under a light, then download the normal map at the same size as your sprite.

Free · no signup · your files stay in your browser

Loading the sprite tool...

How to make a 2D normal map

  1. 1

    Upload a sprite

    Drop a PNG with a transparent background. A single sprite, a tile or a whole sprite sheet works, and pixel art stays crisp.

  2. 2

    Shape the bevel

    Pick Round, Linear or Soft edges, then set the bevel width in pixels and the depth. Wider bevels make the sprite look fuller.

  3. 3

    Add detail

    Raise Detail from colours so shading inside the sprite catches the light too. Smooth softens noisy pixels.

  4. 4

    Test and download

    Move the pointer to move the light. Pick OpenGL or DirectX, then download the normal map PNG, and the height map if you need it.

More free 3D file tools

Frequently Asked Questions

Yes. It runs fully in your browser with no account, no install and no watermark. Your sprite is never uploaded; all the work happens on your device.
It measures how far each pixel is from the nearest transparent pixel, so the middle of the sprite is high and the outline is low, like a pillow. The bevel width sets how far in the slope reaches, and the profile sets its curve. Detail from colours then lifts bright parts a little, so shading painted into the sprite also reacts to light.
Use OpenGL (Y+) for Godot, Unity, GameMaker, Defold and most 2D engines. Use DirectX (Y-) for Unreal Engine. If light looks like it comes from below when it should come from above, switch to the other one; it only flips the green channel.
In Godot 4, give the sprite a CanvasTexture, put the sprite in Diffuse and the normal map in Normal Map, then add a PointLight2D. In Unity with URP 2D, open the sprite in the Sprite Editor, add a Secondary Texture named _NormalMap, set Normal Map on the 2D light and use the Sprite-Lit material. GameMaker and Defold read it in a lighting shader.
Yes. Each frame gets its own bevel because edges come from the transparent gaps between frames, and the output is the same size as your sheet, so frames line up. Pixel art is shown and saved without blurring. For tiles that must join seamlessly, untick Image border is an edge.