CSS mix-blend-mode Property

February 10, 2021 12:37 pm IST

You are Here:

CSS mix-blend-mode Property

CSS mix-blend-mode property specifies how an element's content should blend with its direct parent background.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 275px; background: #0080ff; } img{ width: 250px; height: 125px; mix-blend-mode: multiply; } </style> </head> <body> <h1>CSS mix-blend-mode Property</h1> <div> <img src="car-left.png"> </div> </body> </html>

Run

Syntax

Using CSS

element{ mix-blend-mode: multiply; }

Using Javascript

object.style.mixBlendMode="multiply";

Animatable

No, mix-blend-mode property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS mix-blend-mode property is normal.

Property Value

The following table provides a list of values for CSS mix-blend-mode property.

Value	Explanation
normal multiply screen overlay darken lighten color-dodge color-burn difference exclusion hue saturation color luminosity	These are the list of all possible values which can be used with css 'mix-blend-mode' property.

All in One

In the following example, we will demonstrate all values of CSS mix-blend-mode property.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 275px; background: #0080ff; } img{ width: 250px; height: 125px; } #point{ mix-blend-mode: normal; } #point1{ mix-blend-mode: multiply; } </style> </head> <body> <h1>CSS mix-blend-mode Property</h1> <h2>mix-blend-mode: normal</h2> <div> <img id="point" src="car-left.png"> </div> <h2>mix-blend-mode: multiply</h2> <div> <img id="point1" src="car-left.png"> </div> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS mix-blend-mode property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 275px; background: #0080ff; } img{ width: 250px; height: 125px; } </style> </head> <body> <h1>CSS mix-blend-mode Property</h1> <div> <img src="car-left.png"> </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("img")[0]; function myFunction(){ x.style.mixBlendMode = "multiply"; } </script> </body> </html>

Run