css
  1. css-background-blend-mode
PreviousNext

CSS Background Blend Mode

  • The CSS background-blend-mode property specifies how the background image is blended with the background color.
  • It is used to create special effects and add visual interest to the website.

Syntax

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
  • normal: The default value which displays the background image without blending with the background color.
  • multiply: Multiplies the color of the background image with the background color.
  • screen: Blends the background image with the background color using the screen mode.
  • overlay: Blends the background image with the background color using the overlay mode.
  • darken: Selects the darker color of the background image or the background color.
  • lighten: Selects the lighter color of the background image or the background color.
  • color-dodge: Lightens the background color to reflect the color of the background image.
  • saturation: Creates a color which is a saturation blend of the background color and the background image.
  • color: Creates a color which is a hue blend of the background color and the background image.
  • luminosity: Creates a color which is a luminosity blend of the background color and the background image.

Example

.blend {
    background-image: url('https://static.additionalsheet.com/images//others/lucy.jpg');
    background-color: #fff;
    background-blend-mode: multiply;
}
Try Playground

Explanation

The background-blend-mode property is used to set the blending mode of the background image with the background color. It creates special effects on the website by blending the colors.

Use

The background-blend-mode property is used to create visual interest and special effects on the website. It is best used on elements with a background image and color. It can be used in combination with other CSS properties like background-image and background-color to create unique and beautiful designs.

Important Points

  • The background-blend-mode property is only supported in modern browsers.
  • It is important to use the correct combination of blending modes with the background image and color to achieve the desired effect.
  • The blending modes can be used with the ::before and ::after pseudo-elements to create additional effects.

Summary

The background-blend-mode property is used to blend the background color and image on a webpage. It creates unique and visually interesting effects and can be used in conjunction with other CSS properties such as background-image and background-color. There are several modes available to create a range of effects. It is important to use the correct combination of modes to achieve the desired effect.

Background AttachmentBackground Clip
Published on: