<composite-mode> = clear | copy | source-over | destination-over | source-in | 
destination-in | source-out | destination-out | source-atop | 
destination-atop | xor | lighter | plus-darker | plus-lighter

Introduction to compositing

Simple alpha compositing

co = Cs x αs + Cb x αb x (1 - αs)

• co: the premultiplied pixel value after compositing
• Cs: the color value of the source graphic element being composited
• αs: the alpha value of the source graphic element being composited
• Cb: the color value of the backdrop
• αb: the alpha value of the backdrop

αo = αs + αb x (1 - αs)

• αo: the alpha value of the composite
• αs: the alpha value of the graphic element being composited
• αb: the alpha value of the backdrop

cs = Cs x αs

co = cs + cb x (1 - αs)

Co = co / αo

Examples of simple alpha compositing

This describes the most basic case. It consists of 1 shape that is filled with a solid color (α = 1). The shape is composited with an empty background. The empty background has no effect on the resultant composite.

Cs = RGB(1,0,0)
αs = 1
Cb = RGB(0,0,0)
αb = 0

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(1,0,0) x 1 + RGB(0,0,0) x 0 x (1 - 1)
co = RGB(1,0,0) x 1
co = RGB(1,0,0)

This is a more complex example. There is no transparency, but the 2 shapes intersect. Applying the compositing formula in the area of intersection, gives:

Cs = RGB(0,0,1)
αs = 1
Cb = RGB(1,0,0)
αb = 1

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 1 + RGB(1,0,0) x 1 x (1 - 1)
co = RGB(0,0,1) x 1 + RGB(1,0,0) x 1 x 0
co = RGB(0,0,1) x 1
co = RGB(0,0,1)

Calculating the alpha of the resultant composite

αo = αs + αb x (1 - αs)
αo = 1 + 1 x (1 - 1)
αo = 1

Calculating the color component of the resultant composite

Co = co / αo
Co = RGB(0, 0, 1) / 1
Co = RGB(0, 0, 1)

This is an example where the shape has some transparency, but the backdrop is fully opaque. Applying the compositing formula in the area of intersection, gives:

Cs = RGB(0,0,1)
αs = 0.5
Cb = RGB(1,0,0)
αb = 1

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 1 x (1 - 0.5)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.5
co = RGB(0.5,0,0.5)

Calculating the alpha of the resultant composite

αo = αs + αb x (1 - αs)
αo = 0.5 + 1 x (1 - 0.5)
αo = 1

Calculating the color component of the resultant composite

Co = co / αo
Co = RGB(0.5, 0, 0.5) / 1
Co = RGB(0.5, 0, 0.5)

Figure 4 shows an example where both the shape and the backdrop are transparent. Applying the compositing formula in the area of intersection, gives:

Cs = RGB(0,0,1)
αs = 0.5
Cb = RGB(1,0,0)
αb = 0.5

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.5 x (1 - 0.5)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.25
co = RGB(0.25, 0, 0.5)

Calculating the alpha of the resultant composite

αo = αs + αb x (1 - αs)
αo = 0.5 + 0.5 x (1 - 0.5)
αo = 0.75

Calculating the color component of the resultant composite

Co = co / αo
Co = RGB(0.25, 0, 0.5) / 0.75
Co = RGB(0.33, 0, 0.66)

General Formula for Compositing and Blending

Cs = (1 - αb) x Cs + αb x B(Cb, Cs)

Co = αs x Fa x Cs + αb x Fb x Cb

• Cs: is the source color
• Cb: is the backdrop color
• αs: is the source alpha
• αb: is the backdrop alpha
• B(Cb, Cs): is the mixing function
• Fa: is defined by the Porter Duff operator in use
• Fb: is defined by the Porter Duff operator in use

Backdrop calculation

Examples of backdrop calculation

This example has 2 simple shapes. The backdrop for the blue shape includes the bottom right corner of the red shape . The dotted line shows the area that is examined during compositing of the blue shape.

The shape in the backdrop has an alpha value. The alpha value of the backdrop shape is preserved when the backdrop is calculated.

Compositing Groups

initial backdrop

The initial backdrop is the backdrop used for compositing the group's first element. This will be the same as the group backdrop in a non-isolated group, or a fully transparent backdrop for an isolated group.

group backdrop

The group backdrop is the result of compositing all elements up to but not including the first element in the group.

Group invariance

so: A + B + C = A + (B + C) = (A + B) + C

Isolated Groups

The Root Element Group

The Root Group

Browsers often use an infinite white, 100% opaque root group, for final compositing, but this is not required.

Advanced compositing features

Source Only

Where only the source contributes to the pixel color

Destination only

where only the destination contributes to the pixel color

Both

Source and Destination – where both the source and destination may combine to define the pixel color

None

No source or Destination – where neither make a contribution to the final pixel color

Both = 0.5 x 0.5 = 0.25
Source Only = 0.5 (1 – 0.5) = 0.25
Destination Only = 0.5(1 – 0.5) = 0.25
None = (1 – 0.5)(1 – 0.5) = 0.25

The Porter Duff Compositing Operators

    αo = αs x 1 + αb x (1 – αs)

    αs x Fa + αb x Fb

    co = αs x Fa x Cs + αb x Fb x Cb

• co is the output color pre-multiplied with the output alpha [0 <= co <= 1]
• αs is the coverage of the source Fa is defined by the operator and controls inclusion of the source Cs is the color of the source (not multiplied by alpha)
• αb is the coverage of the destination Fb is defined by the operator and controls inclusion of the destination Cb is the color of the destination (not multiplied by alpha)

Clear

    Fa = 0; Fb = 0
    co = 0
    αo = 0

Copy

    Fa = 1; Fb = 0
    co = αs x Cs
    αo = αs

Destination

    Fa = 0; Fb = 1
    co = αb x Cb
    αo = αb

Source Over

    Fa = 1; Fb = 1 – αs
    co = αs x Cs + αb x Cb x (1 – αs)
    αo = αs + αb x (1 – αs)

Destination Over

    Fa = 1 – αb; Fb = 1
    co = αs x Cs x (1 – αb) + αb x Cb
    αo = αs x (1 – αb) + αb

Source In

    Fa = αb; Fb = 0
    co = αs x Cs x αb
    αo = αs x αb

Destination In

    Fa = 0; Fb = αs
    co = αb x Cb x αs
    αo = αb x αs

Source Out

    Fa = 1 – αb; Fb = 0
    co = αs x Cs x (1 – αb)
    αo = αs x (1 – αb)

Destination Out

    Fa = 0; Fb = 1 – αs
    co = αb x Cb x (1 – αs)
    αo = αb x (1 – αs)

Source Atop

    Fa = αb; Fb = 1 – αs
    co = αs x Cs x αb + αb x Cb x (1 – αs)
    αo = αs x αb + αb x (1 – αs)

Destination Atop

    Fa = 1 - αb; Fb = αs
    co = αs x Cs x (1 - αb) + αb x Cb x αs
    αo = αs x (1 - αb) + αb x αs

XOR

    Fa = 1 - αb; Fb = 1 – αs
    co = αs x Cs x (1 - αb) + αb x Cb x (1 – αs)
    αo = αs x (1 - αb) + αb x (1 – αs)

Lighter

    Fa = 1; Fb = 1
    co = αs x Cs + αb x Cb;
    αo = αs + αb

Plus-darker

    Fa = 1; Fb = 1
    co = max(0, 1 - αs x Cs + 1 - αb x Cb);
    αo = max(0, 1 - αs + 1 - αb);

Plus-lighter

    Fa = 1; Fb = 1
    co = min(1, αs x Cs + αb x Cb);
    αo = min(1, αs + αb);

<div class="container">
  <div class="from"></div>
  <div class="to"></div>
</div>

  .container {
    display: grid;
  }
  .container > div {
    width: 100px;
    height: 100px;
    /* Place the elements on top of each other */
    grid-area: 1 / 1;
  }
  .from {
    background-color: rgb(100% 0% 0% / 50%);
  }
  .to {
    background-color: rgb(0% 0% 100% / 50%);
  }

  .from {
    opacity: 0.5;
  }
  .to {
    opacity: 0.5;
  }

  .container {
    /* Limit the scope of the plus-lighter operation */
    isolation: isolate;
  }
  .from {
    opacity: 0.5;
  }
  .to {
    opacity: 0.5;
    mix-blend-mode: plus-lighter;
  }

Group compositing behavior with Porter Duff modes

Blending

    Cm = B(Cb, Cs)

• Cm: the result color after blending
• B: the formula that does the blending
• Cb: the backdrop color
• Cs: the source color

    Cr = (1 - αb) x Cs + αb x B(Cb, Cs)

• Cr: the result color
• B: the formula that does the blending
• Cs: the source color
• Cb: the backdrop color
• αb: the backdrop alpha

This example has a red rectangle with a blending mode that is placed on top of a set of green rectangles that have different levels of opacity. Note how the top rectangle shifts more toward red as the opacity of the backdrop gets smaller.

Note: The following formula gives the color value in the area where the source and backdrop intersects and then composites with the specified Porter Duff compositing formula. For simple alpha blending, the formula thus becomes:

simple alpha compositing:
    co = cs + cb x (1 - αs)
written as non-premultiplied:
    αo x Co = αs x Cs + (1 - αs) x αb x Cb
now substitute the result of blending for Cs:
    αo x Co = αs x ((1 - αb) x Cs + αb x B(Cb, Cs)) + (1 - αs) x αb x Cb
            = αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb

Separable blend modes

normal blend mode

    B(Cb, Cs) = Cs

multiply blend mode

    B(Cb, Cs) = Cb x Cs

screen blend mode

    B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]
              = Cb + Cs -(Cb x Cs)

overlay blend mode

    B(Cb, Cs) = HardLight(Cs, Cb)

darken blend mode

    B(Cb, Cs) = min(Cb, Cs)

lighten blend mode

    B(Cb, Cs) = max(Cb, Cs)

color-dodge blend mode

    if(Cb == 0)
        B(Cb, Cs) = 0
    else if(Cs == 1)
        B(Cb, Cs) = 1
    else
        B(Cb, Cs) = min(1, Cb / (1 - Cs))

color-burn blend mode

    if(Cb == 1)
        B(Cb, Cs) = 1
    else if(Cs == 0)
        B(Cb, Cs) = 0
    else
        B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)

hard-light blend mode

    if(Cs <= 0.5)
        B(Cb, Cs) = Multiply(Cb, 2 x Cs)
    else
        B(Cb, Cs) = Screen(Cb, 2 x Cs -1)

soft-light blend mode

    if(Cs <= 0.5)
        B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)
    else
        B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)
with
    if(Cb <= 0.25)
        D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb
    else
        D(Cb) = sqrt(Cb)

difference blend mode

    B(Cb, Cs) = | Cb - Cs |

exclusion blend mode

    B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs

Non-separable blend modes

1. Convert the backdrop and source colors from the blending color space to an intermediate hue-saturation-luminosity representation.
2. Create a new color from some combination of hue, saturation, and luminosity components selected from the backdrop and source colors.
3. Convert the result back to the original color space.

    Lum(C) = 0.3 x Cred + 0.59 x Cgreen + 0.11 x Cblue

    ClipColor(C)
        L = Lum(C)
        n = min(Cred, Cgreen, Cblue)
        x = max(Cred, Cgreen, Cblue)
        if(n < 0)
            C = L + (((C - L) * L) / (L - n))

        if(x > 1)
            C = L + (((C - L) * (1 - L)) / (x - L))

        return C

    SetLum(C, l)
        d = l - Lum(C)
        Cred = Cred + d
        Cgreen = Cgreen + d
        Cblue = Cblue + d
        return ClipColor(C)

    Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue)

The subscripts min, mid, and max in the next function refer to the color
components having the minimum, middle, and maximum values upon entry to the function.

    SetSat(C, s)
        if(Cmax > Cmin)
            Cmid = (((Cmid - Cmin) x s) / (Cmax - Cmin))
            Cmax = s
        else
            Cmid = Cmax = 0
        Cmin = 0
        return C;

hue blend mode

    B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))

saturation blend mode

    B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))

color blend mode

    B(Cb, Cs) = SetLum(Cs, Lum(Cb))

luminosity blend mode

    B(Cb, Cs) = SetLum(Cb, Lum(Cs))

Effect of group isolation on blending

The airplane on the left is a normal group, the airplane on the right is an isolated group. In the isolated group, the elements within the group are composited onto an empty initial backdrop, this stops the elements within the group multiplying with the backdrop. In the normal group, the elements within the group are composited onto the initial backdrop containing the land and sky. Therefore the elements of the airplane multiply with the land and sky. In both instances, the result of the group composite is composited onto the land and sky using the normal mix-blend-mode (the default mix-blend-mode applied to the group).

Privacy Considerations

Security Considerations

Changes

• force isolation of SVG images embedded as <img> no longer at risk
• removed destination as an option for <>

• unneeded normative and informative references were removed

• knockout was removed from the non-normative section
• removed paragraph on SVG from simple alpha compositing
• updated abstract to include CSS and clarify intent
• removed clip-to-self and its references
• Changed section 5-10 to be normative + clarified notes/examples in those sections

• clipping was removed as one of the operators that creates an isolated group in SVG
• background-blend-mode was changed so it matches repeating behavior of other background syntaxes.
• The mix-composite property was removed
• all open issues were resolved