imgix APIsRendering APIBlendingBlend Mode

Blend Mode

blend-mode

Blend modes determine how the color, image, or text overlay that’s set with blend will interact with your base image.

You may want to experiment with these modes before applying across a wide range of images. The modes can be grouped into general categories based on their effects, as follows.

Color Blend
Image Blend

Normal

  • blend-mode=normal
    Turns off blending, causing the overlay to be superimposed. This behavior is intended for use with watermarks, similar to the mark parameter.

Darken

  • blend-mode=darken
    Compares the color value of each overlapping pixel from the two layers, and keeps the darker value.
  • blend-mode=multiply
    Multiplies the color values of each overlapping pixel from the two layers, resulting in a darker composite image. Multiplying with black as the blend color will result in black; multiplying with white will leave the image unchanged.
  • blend-mode=burn
    Darkens the image based on the overlay image or color.

Lighten

  • blend-mode=lighten
    Compares the color value of each overlapping pixel from the two layers, and keeps the lighter value.
  • blend-mode=screen
    The reverse of blend-mode=multiply—this parameter multiplies the inverse of the color values of each overlapping pixel from the two layers, lightening the image.
  • blend-mode=dodge
    Brightens the image based on the overlay image or color.

Contrast

  • blend-mode=overlay [Default]
    Overlays the blend image or color, while preserving the highlights and shadows. It effectively multiplies or screens, depending on the background color.
  • blend-mode=softlight
    Lightens each pixel if the overlay is brighter than 50% grey (similar to blend-mode=dodge), and darkens it if the overlay is darker than 50% grey (similar to blend-mode=burn). Effect is like a diffuse spotlight.
  • blend-mode=hardlight
    Lightens each pixel if the overlay is brighter than 50% grey (similar to blend-mode=screen), and darkens it if the overlay is darker than 50% grey (similar to blend-mode=multiply). Effect is like a harsh spotlight.

Inversion

  • blend-mode=difference
    Subtracts the value of the pixel on the overlay layer from the value of the underlying pixel on the base layers or vice versa, depending on which is brighter.
  • blend-mode=exclusion
    Similar to blend-mode=difference, but with less contrast.

Color Components

  • blend-mode=color
    Blends the hue and saturation values of the overlay with the luminance of the base layer.
  • blend-mode=hue
    Blends the hue value of the overlay with the luminance and saturation of the base layer.
  • blend-mode=saturation
    Blends the saturation value of the overlay with the luminance and hue of the base layer.
  • blend-mode=luminosity
    Blends the luminance value of the overlay with the hue and saturation of the base layer.