Blend Mode
blend-mode
Sets how the blend layer composites with the picture. The default is overlay.
Values are case-insensitive. For a blend mode, a prefix selects the first match in the order the Rendering API uses, so d resolves to dodge. An empty value is overlay, and a name that matches nothing draws no layer at all.
Aliases: blendmode, bm.
Use blend-mode[N] to target a specific blend layer, where N is 0–3. Layer 0 is either the bare blend-mode or blend-mode[0]; if both are supplied, the bare name wins.
Accepted values
Blend modes
These draw on every output that carries a blend layer, video included.
| Value | What it does to the picture |
|---|---|
normal | Draws the layer straight over the picture. With an opaque layer the picture disappears entirely; use blend-alpha or an AARRGGBB color for a scrim. |
multiply | Multiplies the picture by the layer, so the result is never lighter. White in the layer leaves the picture alone, black drives it to black. The usual choice for a brand-color tint. |
screen | The inverse of multiply — the result is never darker. Black in the layer leaves the picture alone, white drives it to white. Good for a haze or glow. |
overlay | The default. multiply in the picture’s dark areas and screen in its light ones, which lifts contrast and tints the midtones. |
darken | Keeps the darker of picture and layer in each channel. |
lighten | Keeps the lighter of picture and layer in each channel. |
color-dodge (dodge) | Brightens the picture in proportion to the layer, blowing out highlights hard. |
color-burn (burn) | Darkens the picture in proportion to the layer, crushing shadows hard. |
hard-light (hardlight) | overlay with the roles swapped — the layer decides where to multiply and where to screen. Harsher than overlay. |
soft-light (softlight) | A gentler overlay: a diffuse dodge where the layer is light and a diffuse burn where it is dark. |
difference | The absolute difference per channel, giving an inverted, high-contrast look. |
exclusion | Like difference but lower in contrast, with midtones pulled toward gray. |
hue | Keeps the picture’s luminosity and saturation and takes the layer’s hue. |
saturation | Keeps the picture’s luminosity and hue and takes the layer’s saturation. A gray layer desaturates the picture. |
color | Keeps the picture’s luminosity and takes the layer’s hue and saturation — a duotone-style tint that preserves detail. |
luminosity | Keeps the picture’s hue and saturation and takes the layer’s luminosity. A flat color layer flattens the picture’s brightness. |
Cut modes
These need an output that can be transparent, so they apply to still frames only — see below.
| Value | What it does to the picture |
|---|---|
destination-out | Removes the picture where the layer is, punching the layer’s shape out of the frame. |
destination-in | Keeps the picture only where the layer is, clipping the frame to the layer’s shape. |
Every example above is the same opaque color layer, blend=ff8800, over the same source — only blend-mode changes. Lower blend-alpha or use an AARRGGBB color to soften any of them.
Cut modes are stills only
destination-out removes the picture where the layer is, and destination-in keeps the picture only where the layer is. Both require an output that can be transparent, and only still frames can be:
- Stills from a video (an image
fmsuch asjpg,png,webp,aviforjxl, optionally withvideo-thumbnailto pick the frame) and audiogram stills support cuts. - MP4, WebM, HLS, DASH, animations and audiogram video are opaque, so a cut draws nothing.
- Spritesheets and storyboards support neither cuts nor blend modes.
The two cut modes match exactly rather than by prefix, so an abbreviation such as de draws nothing.
A cut fills its hole with bg, the same way fade does: on a still with alpha, bg as given, and transparent without it; on an opaque still, bg made opaque, and white without it. blend-alpha controls how much a cut removes.
Two stacking behaviors around a cut’s hole differ from the Rendering API on the same URL, both on a still with alpha:
- A later layer in any mode other than
normaldoes not draw into the hole. Anormallayer does. - A gradient, or a fade into an opaque
bg, applied after a cut also tints the hole.
To cut a shape out of a video frame rather than a layer, render a still and use mask.
Each example below renders a PNG still of the same video and uses a transparent PNG as the layer, sized to the frame with blend-size=inherit:
destination-out — the layer's shape is removed from the frame, leaving transparency behind it.Default
destination-out
