2

A linear gradient from red to blue can be created with:

background: linear-gradient(
              rgb(255,0,0),
              rgb(0,0,255))

To create this:

If you instead faded red to transparent and placed that on a blue background with:

background: linear-gradient(
              rgb(255,0,0), 
              rgb(255,0,0,0)),
            rgb(0,0,255);

The result is exactly the same:

In the first example, the center of the image would have RGB values (127.5, 0, 127.5), by linear interpolation.

In the second example, the center of the image is a combination of a partially transparent red (127.5, 0, 0, 0.5) and a solid blue (0, 0, 255). How are these combined to create the same (127.5, 0, 127.5) result as in the first example?

RCS
  • 104
  • 5
  • I've just adjusted your question's formatting for readability (if you disagree with the changes feel free to roll them back), but please note that you left a closing `)` out of your second code sample, following the final `rgb(...)`. – David Thomas Jan 04 '21 at 14:56
  • @DavidsaysreinstateMonica Thanks for the edit, it looks good. I don't think a closing `)` is missing because the final `rgb(...)` is not inside the `linear-gradient(...)` scope, it is a separate background rule. – RCS Jan 04 '21 at 15:16

1 Answers1

1

You have a mistake in your conclusion. The interpolation of the second gradient will give a center coloration of (255, 0, 0, 0.5) and not (127.5, 0, 0, 0.5)

and (255, 0, 0, 0.5) on the top of (0, 0, 255, 1) will give (127.5, 0, 127.5)

    255*0.5 + 0*(1 - 0.5) = 127.5
    0*0.5   + 0*(1 - 0.5) = 0 
    0*0.5   + 255*(1 - 0.5) = 127.5

More details around the math here: Color of stacked semi-transparent boxes depends on order?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415