background-blend-mode
Quick Summary for background-blend-mode
The
background-blend-mode
CSS property sets how an element's background images should blend with each other and with the element's background color.
Code Usage for background-blend-mode
/* One value */ background-blend-mode: normal; /* Two values, one per background */ background-blend-mode: darken, luminosity; /* Global values */ background-blend-mode: initial; background-blend-mode: inherit; background-blend-mode: revert; background-blend-mode: unset;
More Details for background-blend-mode
background-blend-mode
The background-blend-mode
CSS property sets how an element's background images should blend with each other and with the element's background color.
Blending modes should be defined in the same order as the background-image
property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.
Syntax
/* One value */ background-blend-mode: normal; /* Two values, one per background */ background-blend-mode: darken, luminosity; /* Global values */ background-blend-mode: initial; background-blend-mode: inherit; background-blend-mode: revert; background-blend-mode: unset;
Values
<blend-mode>
The blending mode to be applied. There can be several values, separated by commas.
Formal definition
Initial value | normal |
---|---|
Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line . |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
<blend-mode>#where
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
Examples
Basic example
.item { width: 300px; height: 300px; background: url('image1.png'),url('image2.png'); background-blend-mode: screen; }
Try out different blend modes
Specifications
Specification |
---|
Compositing and Blending Level 2 # background-blend-mode |
See also
<blend-mode>
mix-blend-mode
Select your preferred language English (US)DeutschEspañolFrançais日本語Português (do Brasil)Русский中文 (简体) Change language
Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline