Can NormalIt generate a normal map from any image?

Yes. You can load a grayscale map or a regular texture image and tune the generated normal map with strength and filtering controls.

Is there a 3D preview before export?

Yes. NormalIt includes a live 3D preview so you can inspect lighting and surface detail before downloading the result.

Which workflows is NormalIt suited for?

NormalIt is designed for PBR material work, game development, and general 3D texturing workflows including Unity and Unreal Engine.

Normal Map Generator Online with 3D Preview | Height to Normal Map

Source Image

Drag and drop an image here

Supports PNG, JPG, JPEG, WebP

Normal Map Settings

Strength: 3.0Controls the depth of the normal map effect

Level: 1.0Height map contrast adjustment

Blur: 2Pre-blur for smoother results

Sharpness: 0.0Edge sharpening filter

Slope TypeEdge detection algorithm for normal map generation

Invert Height DirectionFlip the height interpretation (valleys ↔ peaks)

What is a Normal Map?

Normal maps add surface detail to 3D models without increasing geometry. They store surface direction information in RGB channels (XYZ normal vectors).

Red = X direction (left-right)
Green = Y direction (up-down)
Blue = Z direction (depth)

No Image Selected

Select an image to generate a normal map

Q&A

What is a normal map?

A normal map is an RGB texture where each color channel (R, G, B) represents surface normal direction (X, Y, Z), used for realistic lighting on 3D models. We mentioned this above, by the way.

How do I use this tool?

Upload any diffuse texture image. The tool analyzes height information and generates a normal map with real-time 3D preview.

Why is my result glowing purple and blue?

That's totally normal! Normal maps look weird but magical. The purple-blue color is how computers see bumpy surfaces.

About Normal Map Generation

Automatic Height Detection

Detects height automatically from your texture! Pick Sobel, Scharr, or Prewitt - they each handle different materials differently.

Real-time 3D Preview

Watch it live on a 3D sphere! Rotate, zoom, tweak settings - you see the results instantly. No surprises.

Adjustable Parameters

Adjust depth, contrast, blur, sharpness - whatever you need! Flip valleys and peaks too. Play around until it's perfect.

Browser-based Processing

Everything runs in your browser. Your images stay on your device. No uploads, no waiting, no limits!

Detection Technology

Uses edge detection (Sobel/Scharr/Prewitt) to calculate surface normals from brightness. Normals get encoded as RGB colors (X=Red, Y=Green, Z=Blue) for standard PBR workflows.

Common Use Cases

Game Development

Make detailed normal maps for Unreal Engine, Unity, and other game engines. Turn diffuse textures into PBR-ready normal maps that work with dynamic lighting.

Architectural Visualization

Create normal maps for brick, concrete, plaster - whatever you need for architectural viz. Add surface detail to walls, floors, facades in 3ds Max, V-Ray, Corona, Blender.

Product Rendering

Make product renders look better! Generate normal maps from product photos or scanned textures for realistic close-up renders.