Skip to main content
Blend modes determine how a layer’s colors combine with the content below it. kimg implements all 16 Photoshop-compatible blend modes.

​
Available blend modes

​
Normal

Default alpha compositing. The source layer is placed on top of the destination using its alpha channel. 
doc.updateLayer(layerId, { blendMode: 'normal' });

​
Multiply

Multiplies the base and blend colors, resulting in a darker image. Multiplying any color with black produces black; multiplying with white leaves the color unchanged. 
doc.setLayerBlendMode(layerId, 'multiply');

​
Screen

Multiplies the inverse of the base and blend colors, resulting in a lighter image. Screening with black leaves the color unchanged; screening with white produces white.

​
Overlay

Multiplies or screens the colors depending on the base color. Preserves highlights and shadows while adding contrast.

​
Darken

Selects the darker of the base or blend color for each channel.

​
Lighten

Selects the lighter of the base or blend color for each channel.

​
ColorDodge

Brightens the base color to reflect the blend color by decreasing contrast. 
doc.setLayerBlendMode(layerId, 'color-dodge');

​
ColorBurn

Darkens the base color to reflect the blend color by increasing contrast. 
doc.setLayerBlendMode(layerId, 'color-burn');

​
HardLight

Multiplies or screens the colors depending on the blend color. Creates a harsh lighting effect. 
doc.setLayerBlendMode(layerId, 'hard-light');

​
SoftLight

Darkens or lightens the colors depending on the blend color. Creates a softer lighting effect than HardLight. 
doc.setLayerBlendMode(layerId, 'soft-light');

​
Difference

Subtracts the blend color from the base color or vice versa, depending on which has the greater brightness value. Blending with white inverts the base color; blending with black produces no change.

​
Exclusion

Creates an effect similar to Difference mode but with lower contrast.

​
Hue

Creates a result color with the luminance and saturation of the base color and the hue of the blend color.

​
Saturation

Creates a result color with the luminance and hue of the base color and the saturation of the blend color.

​
Color

Creates a result color with the luminance of the base color and the hue and saturation of the blend color. Useful for coloring grayscale images.

​
Luminosity

Creates a result color with the hue and saturation of the base color and the luminance of the blend color. The inverse of Color mode.

​
Complete blend mode list

All blend modes are implemented using floating-point math on the [0, 1] range:
  • normal (default)
  • multiply
  • screen
  • overlay
  • darken
  • lighten
  • color-dodge
  • color-burn
  • hard-light
  • soft-light
  • difference
  • exclusion
  • hue
  • saturation
  • color
  • luminosity

​
Example usage

const doc = await Composition.create({ width: 256, height: 256 });

const bgId = doc.addSolidColorLayer({
  name: 'background',
  color: [100, 100, 100, 255],
});

const overlayId = doc.addImageLayer({
  name: 'texture',
  rgba: texturePixels,
  width: 256,
  height: 256,
});

doc.setLayerBlendMode(overlayId, 'overlay');
doc.setLayerOpacity(overlayId, 0.5);

const png = doc.exportPng();

​
Blend mode internals

Blend modes are case-insensitive and accept multiple formats: 
// All of these are equivalent:
doc.setLayerBlendMode(id, 'color-dodge');
doc.setLayerBlendMode(id, 'ColorDodge');
doc.setLayerBlendMode(id, 'color_dodge');
See ~/workspace/source/crates/kimg-core/src/blend.rs:14-51 for the full blend mode implementation.

Build docs developers (and LLMs) love

Get started for freeTalk to us