CSS background-blend-mode Property

February 10, 2021 12:37 pm IST

You are Here:

CSS background-blend-mode Property

CSS background-blend-mode property sets how an element's background images should blend with each other and with the element's background color.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ padding: 25px; height: 240px; width: 240px; margin-bottom: 15px; background: url(husky.jpg); background-color: #ff4d4d; background-repeat: no-repeat; } #point{ background-blend-mode: normal; } #point1{ background-blend-mode: multiply; } #point2{ background-blend-mode: screen; } </style> </head> <body> <h1>CSS background-blend-mode Property</h1> <h2>background-blend-mode: normal</h2> <div id="point"></div> <h2>background-blend-mode: multiply</h2> <div id="point1"></div> <h2>background-blend-mode: screen</h2> <div id="point2"></div> </body> </html>

Run

Syntax

Using CSS

element{ background-blend-mode: multiply; }

Using Javascript

object.style.backgroundBlendMode="multiply";

Animatable

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

Default Value

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

Property Value

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

Value	Explanation
normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity	Specifies the values of CSS `background-blend-mode` property.

Using JavaScript

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

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #point{ padding: 25px; height: 240px; width: 240px; margin-bottom: 15px; background: url(husky.jpg); background-color: #ff4d4d; background-repeat: no-repeat; background-blend-mode: normal; } </style> </head> <body> <h1>CSS background-blend-mode Property</h1> <div id="point"></div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementById("point"); function myFunction(){ x.style.backgroundBlendMode = "multiply" } </script> </body> </html>

Run