The mix-blend-mode property specifies how an element's content blends with the parent element's content (backdrop) underneath. Used for graphic effects such as multiply, screen, overlay, etc..overlay {
mix-blend-mode: multiply;
}.duotone {
mix-blend-mode: luminosity;
background: hotpink;
}normalNo blending — the element displays normally over the backdrop (default value).multiplyMultiplies colors — darkens. Black stays black; white has no effect.screenScreen operation — lightens. White stays white; black has no effect.overlayCombines multiply and screen based on backdrop lightness.darkenSelects the darker of the element and backdrop colors.lightenSelects the lighter of the element and backdrop colors.color-dodgeBrightens the backdrop to reflect the element. Black has no effect.color-burnDarkens the backdrop to reflect the element. White has no effect.hard-lightMultiply or screen based on element brightness — strong-light effect.soft-lightSoft-light effect — gently brightens or darkens.differenceSubtracts the darker from the lighter per color channel.exclusionSimilar to difference but lower contrast.hueElement's hue with the backdrop's saturation and luminosity.saturationElement's saturation with the backdrop's hue and luminosity.colorElement's hue and saturation with the backdrop's luminosity.luminosityElement's luminosity with the backdrop's hue and saturation.plus-darkerInverts, sums and clamps to minimum — useful for select graphic effects.plus-lighterSums and clamps to maximum — useful for cross-fades.Compositing and Blending Level 2Editor's DraftW3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
