Home › Games › Normal Map Generator

Normal Map Generator

Turn a height map, bump map, or any texture into a tangent-space normal map (OpenGL or DirectX) in your browser. Adjustable strength, tileable edges, PNG output, no upload.

Drop files here, paste with Ctrl+V, or

Accepts .png, .jpg, .jpeg, .webp, .bmp, .tga, .dds, .gif, .avif · Processed on your device, never uploaded

How steep the bumps look. 1 to 3 for subtle detail, 5 and up for deep relief.

Runs on the browser's own image decoder and canvas. Your file stays in this tab.

About this tool

A normal map tells a game engine which way every point on a surface faces, so a flat polygon can catch light as if it had bricks, grooves, or pores. This tool derives one from a height map: the brightness of each pixel is read as height, the slope is measured with a Sobel filter, and the resulting surface direction is stored as the familiar purple-blue image. It works on real height maps, on bump maps, and, less accurately, on ordinary photos of a surface.

Strength controls how steep the slopes are. Pick the green channel convention your engine expects: OpenGL style (Y+) for Blender, Unity, and Godot, DirectX style (Y-) for Unreal, Source, and 3ds Max; getting it wrong makes bumps look like dents. Leave wrapping on for tiling textures so the edges match, and export DDS or TGA afterwards if your engine wants those formats.

How to use it

  1. Drop your PNG, JPG, WebP or BMP files into the box above, or click to browse. Nothing is uploaded.
  2. Adjust the options if you want; the defaults suit most files.
  3. Click the button and wait a moment.
  4. Download the results individually or all at once as a ZIP.

Questions

What should the input look like?

A grayscale image where white is high and black is low gives the best result. Color images are converted to luminance first, so a photo works but bright paint reads as height.

OpenGL or DirectX?

They differ only in whether green points up or down. Blender, Unity, Godot, and glTF use OpenGL (Y+); Unreal, Source, and 3ds Max use DirectX (Y-). If lighting looks inverted top to bottom in your engine, regenerate with the other setting.

Why is the output mostly one flat color?

A flat normal map (128, 128, 255) means the input had no height variation, or the strength is too low for subtle differences. Increase the strength or add contrast to the height map first.

Can I make the height map here too?

Yes, the Noise Texture Generator produces seamless black and white height maps that feed straight into this tool.

Is it free, are files uploaded, which browsers work: the general questions are answered once for the whole site.

Format guides

Related tools

More game dev tools

View all
Minecraft Skin EditorMake and edit Minecraft skins in your browser: paint on the 3D model or the texture, layers, left/right mirroring, Steve and Alex, poses, load any player by usernameResource Pack EditorDrop a Minecraft resource pack zip, browse every texture, edit blocks, items, and mobs in a pixel editor with layers, add new textures at the right path, set the pack version, and download the rebuilt zipBanner and Shield MakerDesign a Minecraft banner or shield: stack up to 16 patterns in 16 dye colors with a live preview, then copy the /give command (1Command GeneratorBuild Minecraft commands without the syntax headaches: /give items with custom names, lore, enchantments, and unbreakable; /summon mobs with names and flags; /tellraw and /title messagesMinecraft Server Icon MakerMake a Minecraft server icon from any image: exactly 64×64 PNG, saved as server-iconSprite EditorDraw pixel art and animated sprites in your browser: pencil, fill, layers, mirror mode, palettes, lighten, darken, and noise brushes, frames with playback, undoImage to Pixel ArtTurn any photo or drawing into pixel art in your browser: choose the pixel size, a limited palette (16 colors, Game Boy, PICO-8), and ditheringSprite Sheet MakerPack animation frames or the frames of a GIF into a sprite sheet grid with JSON coordinates, in your browser