IMG · Images tools

Displacement Map

Shareable link

Settings are written to the URL as you change them. Nothing differs from the defaults yet.

A displacement map is the primitive behind most convincing warps: fabric that follows a body, type that sits on a crumpled sheet, a reflection that moves with water. Instead of a formula deciding where each pixel goes, a second image decides.

How the offset is read

Every pixel of the map is treated as a signed value around its midpoint. Mid grey means no movement. Darker pushes one way, brighter pushes the other, and the distance scales with how far the value sits from the middle.

That is why a map of flat mid grey does nothing and a map of pure black and white produces the strongest possible shift. It is also why a map’s contrast matters more than its brightness.

Luminance or Red / Green

Luminance mode reads a single value per pixel and applies it to both axes, so the image stretches diagonally. It suits fabric, water, and anything where the direction is roughly uniform.

Red / Green mode is the Photoshop convention: horizontal shift comes from the red channel, vertical from the green. One map can then push sideways in one region and downward in another, which is what makes purpose-built displacement maps worth authoring.

Map Softness

The most common failure is tearing. A hard edge in the map sends two adjacent pixels to positions far apart, and the image splits along that line.

Softness blurs the map before it is used, not the image, so the offsets vary smoothly and the warp stays continuous. A photograph pressed into service as a map usually needs 15% to 40%. A gradient or a blurred noise field needs none.

Map Scale and tiling

The map is centred and fitted to the frame by default, with anything outside it filled with neutral grey so the border stays still. Scaling it above 100% crops into the map, which is useful when only its centre carries the structure you want.

Tiling repeats the map across the frame instead. Use it for weave, grain, and any texture that was captured as a small sample.

Edge handling

Shift a pixel in from beyond the border and there is nothing there to sample. Clamp stretches the outermost row, which is invisible for small shifts and smears for large ones. Wrap and Mirror both borrow from elsewhere in the image and suit tiling work. Transparent leaves the region empty and forces a PNG export so the alpha survives.

Limits

The warp samples the source bilinearly, so a large shift over a small feature softens it. Displacement moves pixels, it does not invent them. When the intent is a deep distortion of fine detail, work from the largest source available rather than an already-resized copy.

Frequently Asked Questions

It moves every pixel of the source image by an amount read from a second image, the map. Bright areas of the map push one way, dark areas push the other, and mid grey leaves the pixel where it was. Both images accept JPEG, PNG, and WebP.

Anything with smooth, continuous tonal change: fabric weave, crumpled paper, water, wood grain, a gradient, or a blurred noise field. Hard-edged maps tear the image because neighbouring pixels get sent to unrelated places. Raise Map Softness when that happens.

It reads horizontal shift from the red channel and vertical shift from the green, which is the convention Photoshop's Displace filter uses. It lets one map drive the two axes independently instead of pushing both by the same amount.

The map is read as a signed offset around its midpoint, so 128 means no movement, 0 is full shift in one direction, and 255 is full shift in the other. A map that is mostly mid grey moves only where it deviates.

Pixels pushed in from outside the frame have no source. Clamp stretches the border, Wrap takes them from the opposite side, Mirror reflects them back, and Transparent leaves them empty and exports as PNG.

Explore Our Tools

Browse all tools