News Journal

CSS blending modes determine how two layers visually interact. In the following example, I chose an image and a background as layers to change the image's appearance, give it a makeover, or create a dramatic color transformation, so that the background color is taken into account.

• • August 2025

    

  • The original without effects, only with the traditional effect created by the color of the passe-partout, to enhance the image.

• • 

  • Sets the blending mode to hard-light: The effect is similar to illuminating the background with a bright spotlight, that's why I darkened the background.

• • 

  • Sets the blending mode to difference: Subtracts the darker of the two constituent colors from the lighter color. Painting with white inverts the backdrop color; painting with black produces no change. The result is like a watercolor painting, it's amazing!

I've always used photo editing tools to give them a special touch, that's why I like this way of treating photos so much; they're like little works of art.

[You can find more information about the specifications through the link from the World Wide Web Consortium (W3C):Compositing and Blending Level 2]

Playing with mix-blend-mode

While the "mix-blend" mode blends the content of an element with its background, the "background-blend" mode blends multiple backgrounds (colors and images) of the same element. Therefore, it's best to use "mix-blend" mode to blend a text element with the background of its parent element or one image over another, and to use "background-blend" mode when you have more than one background layer for an element and want them to blend together.

All elements have the same CSS linear-gradient Function, with the same color stops, as the value for the background-image property; which represents the color transition that goes in a straight line. And, I added a fourth element with the value text for the background-clip property, just to compare another way of styling text.