defines the blending mode of each background layer (color and/or image).background-blend-mode: multiply;background-image: url('texture.png'), linear-gradient(to right, #e66465, #9198e5);
background-blend-mode: overlay;normalThe default blending mode. The top background layer is displayed as-is, with no blending effect applied to the layers beneath it. Each pixel appears in its original color.multiplyMultiplies the color values of the top background layer by those of the layer beneath. The result is always darker than either original — white has no effect, black turns everything black.screenThe opposite of multiply: computes the complement of the product. The result is always brighter — black has no effect, white turns everything white. Creates the effect of two transparencies projected together.overlayCombines multiply and screen based on the brightness of the bottom layer: dark areas become darker (multiply), bright areas become brighter (screen). Increases contrast and enriches colors.darkenCompares color values of both layers channel by channel and keeps the darker value for each. The resulting layer is never lighter than either of the two source layers.lightenCompares color values of both layers channel by channel and keeps the lighter value for each. The exact opposite of darken — the resulting layer is never darker than either of the two source layers.color-dodgeBrightens the bottom layer based on the top layer's color by dividing the complement. Creates an intense lighting effect — black has no effect, and light colors produce dramatic brightening.color-burnDarkens the bottom layer based on the top layer's color. The opposite of color-dodge — white has no effect, and dark colors produce intense darkening with increased contrast.hard-lightSimilar to overlay but the decision to darken or lighten is based on the top layer's brightness (not the bottom). Dark areas in the top layer darken the result, bright areas lighten it — simulates the effect of a harsh spotlight.soft-lightA softer, more subtle version of hard-light. Creates the effect of a diffused, gentle light source — less contrast and smoother transitions. Bright areas add a glow, dark areas add depth.differenceCalculates the absolute difference between color values of both layers. Identical areas turn black, differing areas produce inverted colors. Useful for spotting differences between two images.exclusionSimilar to difference but with lower contrast and softer results. Identical areas turn gray instead of black, giving a more subtle and dreamy appearance.hueApplies the hue of the top layer while preserving the saturation and luminosity of the bottom layer. Allows recoloring areas while maintaining the original texture and tone.saturationApplies the saturation of the top layer while preserving the hue and luminosity of the bottom layer. Affects color intensity without altering the hue itself.colorCombines the hue and saturation from the top layer with the luminosity of the bottom layer. Useful for colorizing grayscale images while preserving light and shadow details.luminosityApplies the luminosity of the top layer while preserving the hue and saturation of the bottom layer. The opposite of color — changes light intensity without altering the color.backgroundsW3C Working DraftW3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext
