CSS background-blend-mode Property

CSS background-blend-mode property specifies how different background images/colors should blend with each other when applied on a single element.

In the below example, we have set the background-blend-mode to luminosity. Try it out to see how it looks:

Example:

body{
    background-image: url('images/tree-transparent.png'), url('images/sand.jpg');
    background-repeat: no-repeat;
    background-blend-mode: luminosity;
}

CSS Syntax

The background-blend-mode property has the following syntax:

background-blend-mode: normal|luminosity|multiply|screen|overlay|darken|lighten|hard-light|soft-light|color|color-dodge|color-burn|difference|exclusion|hue|saturation;

Property Values

The background-blend-mode property accepts the following values:

normalSpecifies a normal blending mode. This is the default value.
luminositySpecifies a luminosity blending mode.
multiplySpecifies a multiply blending mode.
screenSpecifies a screen blending mode.
overlaySpecifies an overlay blending mode.
darkenSpecifies a darken blending mode.
lightenSpecifies a lighten blending mode.
hard-lightSpecifies a hard-light blending mode.
soft-lightSpecifies a soft-light blending mode.
colorSpecifies a color blending mode.
color-dodgeSpecifies a color-dodge blending mode.
color-burnSpecifies a color-burn blending mode.
differenceSpecifies a difference blending mode.
exclusionSpecifies an exclusion blending mode.
hueSpecifies a hue blending mode.
saturationSpecifies a saturation blending mode.

General Info

Default Valuenormal
InheritedNo
JavaScript Usageelement.style.backgroundBlendMode = “luminosity”

Related Pages

CSS Tutorial: CSS Background

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment