Post

RBG-in-RGB

The mix-blend-mode property in CSS allows you to control how the content of an element blends with the content of the element's parent and the background.

This property is particularly useful for creating artistic effects, such as overlays and color changes, by blending elements together using different modes.

The CSS syntax for the mix-blend-mode property is straightforward. You can apply it to any element to define how its content should blend with the content beneath it.

element {
        mix-blend-mode: blend-mode;
}

Here, blend-mode can be any of the predefined blending modes.

Properties

Value	Description
normal	The element does not blend with its background; this is the default behavior.
multiply	The background color is multiplied by the color of the element, resulting in a darker color.
screen	The inverse of the background color and the inverse of the color of the element are multiplied, resulting in a lighter color.
overlay	Combines multiply and screen modes; the background is multiplied or screened based on the background color.
darken	The resulting color is the darker of the background and the element's color.
lighten	The resulting color is the lighter of the background and the element's color.
color-dodge	The background color is brightened to reflect the color of the element.
color-burn	The background color is darkened to reflect the color of the element.
hard-light	Similar to overlay, but uses the color of the element.
soft-light	A softer version of hard-light.
difference	Subtracts the darker of the colors from the lighter of the colors.
exclusion	Similar to difference, but with lower contrast.
hue	Preserves the luma and chroma of the background while adopting the hue of the element.
saturation	Preserves the luma and hue of the background while adopting the saturation of the element.
color	Preserves the luma of the background while adopting the hue and chroma of the element.
luminosity	Preserves the hue and chroma of the background while adopting the luma of the element.