HomeGames › 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.

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.

Everything happens inside your browser. Your file is never uploaded to a server: the conversion runs on your own device using WebAssembly, and the result is downloaded straight from memory. Close the tab and nothing is left behind.

How to use it

  1. Drop your PNG 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.

Frequently asked 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 this really free?

Yes. The site is supported by ads, and there are no limits on how many files you convert.

Are my files uploaded anywhere?

No. The converter runs entirely in your browser. Files stay on your device, which also makes it faster than upload-based converters for anything larger than a few megabytes.

Is there a file size limit?

The only limit is your device's memory. Images and audio of any normal size are fine; for video, files under about 500 MB work well on most laptops and phones.

Which browsers are supported?

Current versions of Chrome, Edge, Firefox, and Safari on desktop and mobile. Very old browsers without WebAssembly support will not work.

Format guides

Related tools

More game dev tools

View all
Minecraft Skin EditorMake and edit Minecraft skins in your browser: paint directly on the 3D model or the 64 × 64 texture, Steve and Alex, part guide, palettes, mirror mode, undoMinecraft 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, mirror mode, palettes, noise shading 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 browserSprite Sheet SplitterSplit a sprite sheet or tileset into individual PNG frames by grid or tile size, in your browserPixel Art UpscalerScale pixel art, sprites, and game textures up 2x to 16x with crisp nearest-neighbour scaling, in your browserNoise Texture GeneratorGenerate seamless, tileable noise textures (Perlin, value, cellular Worley, white grain) as PNG for games, shaders, and 3D materials, in your browser