CSS mix-blend-mode property determines how the content of an element should blend with the content of its parent and the element’s background.
Syntax
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;
Property Values
| Value | Description |
|---|---|
| normal | No blending occurs. |
| multiply | It darkens colors by multiplying the background and foreground colors. |
| screen | It lightens colors by inverting, multiplying, and inverting again. |
| overlay | It combines multiply and screen, preserving highlights and shadows. |
| darken | It retains the darker color from overlapping elements. |
| lighten | It retains the lighter color from overlapping elements. |
| color-dodge | It brightens the background by decreasing the color of the element. |
| color-burn | It darkens the background by increasing the color of the element. |
| difference | It subtracts the colors to create a high-contrast effect. |
| exclusion | It is similar to difference, but with softer contrast effects. |
| hue | It preserves luminance and saturation, altering only the hue. |
| saturation | It Preserves luminance and hue, altering only the saturation. |
| color | It combines hue and saturation of the element with luminance. |
| luminosity | It preserves hue and saturation, altering only the luminosity. |
Examples of CSS Mix Blend Mode Property
The following examples explain the mix-blend-mode property with different values.
Mix Blend Mode Property with Normal Value
To prevent an element from interacting with other layers, we use the normal value. The element is rendered as is without any interaction with underlying layers. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: normal; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: normalalt="img" height=250 width=300/></div></body></html></pre>Mix Blend Mode Property with Multiply Value
To multiply the background and foreground colors, resulting in a darker color, we use the multiply value. It results in rich shadows. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: multiply; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: multiplyalt="img" height=250 width=300/></div></body></html></pre>Mix Blend Mode Property with Screen Value
To brighten the colors by inverting both layers, multiplying them, and then inverting the result, we use the screen value. It produces a brightening effect. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: screen; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: screenalt="img" height=250 width=300/></div></body></html></pre>Mix Blend Mode Property with Overlay Value
To enhances contrast by darkening dark areas and lightening light areas, we use the overlay value. It combines multiply and screen preserving highlights and shadows. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: overlay; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: overlayalt="img" height=250 width=300/></div></body></html></pre>Mix Blend Mode Property with Darken Value
To compare the background and foreground colors, retaining the darker color, we use the darken value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: darken; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: darkenalt="img" height=250 width=300/></div></body></html></pre>Mix Blend Mode Property with Lighten Value
To retain the lighter color from overlapping elements, we use the lighten value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: lighten; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: lightenalt="img" height=250 width=300/></div></body></html></pre>Mix Blend Mode Property with Color Dodge Value
To brighten the background by decreasing the foreground colors intensity, we use the color-dodge value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: color-dodge; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: color-dodgealt="img" height=250 width=300/></div></body></html></pre>Mix Blend Mode Property with Color Burn Value
To darken the background by increasing the foreground colors intensity, we use the color-burn value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: color-burn; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: color-burnalt="img" height=250 width=300/></div></body></html></pre>Mix Blend Mode Property with Difference Value
To subtract the colors of the overlapping layers, resulting in high-contrast effect, we use the difference value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: difference; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: differencealt="img" height=250 width=300/></div></body></html></pre>Mix Blend Mode Property with Exclusion Value
To subtract the colors of the overlapping layers, resulting in a soft contrast effect, we use the exclusion value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: exclusion; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: exclusionalt="img" height=250 width=300/></div></body></html></pre>Mix Blend Mode Property with Hue Value
To preserve the luminance and saturation of the background while altering only the hue of the element, we use the hue value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: hue; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: huealt="img" height=250 width=300/></div></body></html></pre>Mix Blend Mode Property with Saturation Value
To preserve luminance and hue, modifying only the saturation of the element, we use the saturation value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: saturation; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: saturationalt="img" height=250 width=300/></div></body></html></pre>Mix Blend Mode Property with Color Value
To combine the hue and saturation of the element with the luminance of the background, we use the color value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: color; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: coloralt="img" height=250 width=300/></div></body></html></pre>Mix Blend Mode Property with Luminosity Value
To preserve the hue and saturation of the element, altering only the luminance, we use the luminosity value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { background-color: #6666ff; height: 300px; display: flex; justify-content: center; align-items: center; }</style></head><body><h2>.container>img { mix-blend-mode: luminosity; }</h2><h4>CSS mix-blend-mode property</h4><div class="container"><img src="/css/images/content.png"mix-blend-mode: luminosityalt="img" height=250 width=300/></div></body></html></pre>
Leave a Reply