The mix-blend-mode CSS property is used to specify how an element’s content should blend with the content of its parent and underlying elements. It affects the visual appearance by defining the blending mode for the element’s rendered pixels.
The mix-blend-mode property accepts different blending modes, including:
-
normal: The default blending mode, where the element’s content is rendered as is. -
multiply: Multiplies the colors of the element’s content with the background, creating a darker appearance. -
screen: Inverts the colors of the element’s content and the background, resulting in a lighter appearance. -
overlay: Combines themultiplyandscreenblending modes, producing a high-contrast effect. -
color-dodge: Brightens the element’s content based on the background color. -
color-burn: Darkens the element’s content based on the background color. - Many more blending modes are available.
Here’s an example:
.blend-mode-example {
mix-blend-mode: multiply;
}
In this example, the .blend-mode-example class applies the multiply blending mode to the element. This causes the element’s content to blend with the background by multiplying their colors together.
The mix-blend-mode property offers creative possibilities for blending and compositing elements in CSS. It allows you to achieve interesting visual effects and create unique designs by altering the blending behavior of an element with its surroundings.