Skip to main content

Browser texture tool

Bump Map Generator Online — Turn an Image into a Grayscale Relief Map

Convert a photo or material texture into a grayscale bump map in your browser. Start with the Height output, inspect how its light and dark areas describe relative surface relief, tune the result, and export a PNG for a material workflow.

Browser tool·no server upload

Create a bump map from an image

Upload a texture or choose a sample. Height is selected by default. Adjust Blur and Contrast to shape its grayscale values; Strength controls the Normal output, not the Height map.

Processed in your browser
stone-sample.png

Upload an image or choose a sample texture to start.

Preparing a Stone sample…
Preview surface
PNG exportHeight-based conversionNo sign-upSee supported outputs

What this bump map generator creates

The Height output is a single-channel grayscale estimate derived from image luminance. Lighter pixels represent relatively higher areas and darker pixels lower areas. Contrast and blur help shape this signal before export. This is useful for a quick bump-map starting point from brick, stone, fabric, wood grain, or another image with visible surface detail. It is not a recovered scan of real depth: a color photo alone does not tell the tool which bright or dark areas are physically raised.

How to use the online bump map generator

  1. 1. Choose a useful source

    Upload a PNG, JPG, or WebP texture with clear detail, or start with one of the included samples. A material texture or evenly lit close-up is usually easier to interpret than a scene with strong cast shadows.

  2. 2. Select the Height output

    The grayscale Height tab is already active. It is the output intended for bump or height inputs; the purple-blue Normal tab stores RGB surface directions and serves a different shader input.

  3. 3. Adjust and inspect

    Adjust Blur and Contrast in small steps. Strength controls the Normal output, not the grayscale Height map. Check the Height preview at your expected use scale. If grooves disappear, add contrast; if the map looks noisy, reduce contrast or soften tiny details with blur.

  4. 4. Export and test in your shader

    Download the Height PNG, import it as non-color data where the renderer requires it, and connect it to a bump node’s height input. Set the shader’s bump strength or distance in the target material; a good texture file can still look exaggerated when its material scale is too high.

Example: turning a brick texture into a bump map

For a brick wall, begin with a front-facing texture where mortar and brick faces are visible without a large lighting gradient. Preview the grayscale Height output: the mortar should separate from the brick faces, while small pores should remain readable. If the original photo has a bright hotspot on one side, that highlight can become a false raised band. Reduce its effect by choosing a more even source, lowering contrast, or editing the source before conversion. Then test the exported PNG under the lighting and texture scale of the final material instead of judging it only on a screen preview.

Bump map vs. normal map vs. displacement map

Map typeWhat the pixels representTypical result
Bump / heightGrayscale relative height valuesChanges shading detail without moving the mesh silhouette.
NormalRGB surface direction vectorsChanges lighting direction per pixel; use a normal-map shader input.
DisplacementGrayscale values interpreted as surface offsetsCan move geometry only when the renderer and mesh provide displacement support.

Local browser processing

This generator decodes and processes the selected source image in the current browser tab and exports the result as a PNG. The free conversion flow does not send the image to a conversion endpoint. Keep a copy of your original image, because the exported grayscale map is a derived texture and not a replacement for the source asset.

Bump map generator FAQs

How do I make a bump map from an image?

Upload a texture, keep the Height output selected, and tune contrast and blur until the grayscale variation describes the detail you want. Export the Height PNG, then connect it to the bump or height input in your material shader. The result is an estimate from image brightness, so review it in the final lighting.

Is a bump map the same as a normal map?

No. A bump or height map stores grayscale values that a shader interprets as relative height. A normal map stores surface directions in RGB. This page exports the grayscale Height output; choose the Normal tab when your material specifically needs an RGB normal texture.

Can this online bump map generator create real 3D geometry?

No. The grayscale output can affect shading through bump mapping. It does not add polygons or change the mesh silhouette. Actual displacement depends on the renderer, material setup, and mesh tessellation.

Which images make a good bump map?

Close-up material images with readable, evenly lit texture usually make the clearest starting point. Strong shadows, shiny reflections, perspective, and objects in the frame can be mistaken for surface height. A hand-painted grayscale height image gives you more direct control.

Why does my bump texture look inverted or too strong?

Black and white may be interpreted in the opposite direction by a shader, so invert the source or adjust the material if raised and recessed areas appear swapped. If the result looks harsh, lower the bump node’s strength or distance, then review the texture at its intended physical scale.

What file does the bump map creator export?

The active Height output downloads as a PNG at the generated image dimensions. PNG keeps the grayscale pixels losslessly; your renderer may still apply its own import, color-space, bit-depth, or compression settings.

Can I use this bump map in Blender?

Yes. Load the grayscale PNG as image data, connect its color or grayscale value to the Height input of Blender’s Bump node, then connect the node’s Normal output to the material shader’s Normal input. Adjust Strength and Distance for the object scale. See the Blender Manual’s Bump Node reference for current node behavior.

Continue your texture workflow