Displacement Map Generator

Generate grayscale displacement maps (height maps) from any image online. Adjust the result in your browser and download a PNG without uploading the source image.

Create a Displacement Map Online

Upload a PNG or JPG up to 10MB, adjust the height response, preview the result, and download the current displacement map as a PNG.

What Is a Displacement Map?

A displacement map, also called a height map, is a grayscale image that stores how high or low a surface should be. Black usually represents lower areas, white represents higher areas, and gray values represent the heights between them. A renderer can use this data to create relief without manually modeling every ridge, brick edge, or terrain contour.

Use displacement maps for terrain, brick or stone relief, close-up architectural visualization, and 3D printing workflows.

Key difference: Unlike a normal map, a displacement map can change geometry when the renderer, material, and mesh have enough subdivision. A normal map changes the direction used for lighting, but it does not change the model's geometry or silhouette. If a Normal Map is a mask, a Displacement Map is the actual face underneath.

Try our normal map generator, which also supports normal, AO, and specular map outputs.

Grayscale displacement map generated from a brick texture

How to Generate a Displacement Map

Turn a source texture into usable height data in three steps. The preview stays beside the controls so you can judge the result before export.

1

Upload a texture

Choose a PNG or JPG with clear surface detail, even lighting, and no larger than 10MB.

2

Adjust the settings

Use Strength for stronger height differences, Level for the tonal response, and Blur/Sharp to smooth noise or emphasize edges. Use Invert Height to swap black and white.

3

Download the result

Export the current output as a PNG at the processed image dimensions, then import it into Blender, Unity, Unreal Engine, or another tool as a Displacement or Height texture.

Displacement Map Settings Explained

Use the four controls below to shape the grayscale height data. Change one setting at a time and compare the preview with the source texture.

Strength

Controls how far values move from the Level midpoint. Higher values create stronger relief; start near the default and increase it only when the output looks flat.

Level

Sets the tonal midpoint. Move it when the map feels globally too high or low; Strength controls intensity, while Level controls where the response begins.

Blur / Sharp

Negative values smooth noise and compression artifacts. Positive values emphasize edges, but can exaggerate noise.

Invert Height

Swaps black and white. Use it when a recessed area appears raised in the 3D preview or target renderer.

Where to Use Displacement Maps

Choose displacement when the workflow needs actual surface depth rather than lighting detail alone.

Displacement map applied to a 3D preview surface

Terrain and landscape

Convert satellite imagery or grayscale elevation data into height information for Unity or Unreal terrain systems.

Brick texture used for close-up 3D rendering

3D rendering and ArchViz

Add real geometric depth to brick, stone, plaster, and relief surfaces when the camera moves close enough for normal-only shading to look flat. Tessellation or subdivision is usually required.

Grayscale height map for a 3D printing workflow

3D printing

Use a grayscale height map as source data for a workflow that converts surface elevation into an STL or another printable mesh format.

Displacement Map vs Normal Map vs Bump Map

The right map depends on whether you need real geometry or only the appearance of surface detail.

Displacement Map

Stores
Grayscale height (black = low, white = high)
Changes geometry?
Yes, when supported
Performance
Highest cost
Best fit
Film, terrain, close-ups, 3D printing

Normal Map

Stores
RGB surface-direction vectors
Changes geometry?
No
Performance
Fast
Best fit
Games and real-time rendering

Bump Map

Stores
Grayscale height interpreted as shading
Changes geometry?
No
Performance
Usually fastest
Best fit
Small surface adjustments

Generate a Displacement Map in Your Browser

Upload a texture, adjust the height response, inspect the preview, and download a PNG without installing software.

Displacement Map Generator: Create Height Maps Online