Blend modes, or blending modes, is one of the fastest ways to get amazing looking images. Each blend mode changes the way that a layer reacts with the layer underneath it.
Blend modes have been around since 1994 when Layers first were added in Photoshop v3. You can also find blending modes with the painting tools, the layer styles, and smart filters.
You can use most of the blend modes available in a design tool with CSS using mix-blend-mode or background-blend-mode properties:
mix-blend-mode: <blend-mode>;
background-blend-mode: <blend-mode>;The CSS data type <blend-mode> describes how colors should appear when elements overlap using a keyword value chosen from normal, multiply, screen, overlay, darken, lighten, and many others.
Compositing describes how shapes of different elements are combined into a single image. There are various possible approaches for compositing. Blending is the aspect of compositing that calculates the mixing of colors where the source element and backdrop overlap.
Conceptually, the colors in the source element are blended in place with the backdrop. After blending, the modified source element is composited with the backdrop. In practice, this is usually all performed in one step. The blending calculations must not use pre-multiplied color values.
This property is used to blend the background layers (image or color) of an element. Blend modes are defined as a value and they specify how to blend or mix the colors of the background image with the color, or other background images, behind it.
The background-blend-mode list must be applied in the same order as background-image. This means that the first element in the list will apply to the layer that is on top. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.
.example {
background-repeat: no-repeat;
background-image: linear-gradient(to right, #000 0%, #fff 100%),
url('cat.png');
background-blend-mode: difference, normal;
}This property describes how the blending should be between stacked HTML elements. Elements on overlapping layers will blend with those beneath it. Any images, text, borders, or headings will be influenced by this property.
Applying a blendmode other than normal to the element must establish a new stacking context. This group must then be blended and composited with the stacking context that contains the element.
body {
background-color: lime;
}
img {
mix-blend-mode: multiply;
}