How Does mix-blend-mode Work?

Understanding CSS blend modes.

What You'll Learn

Blend mode values
Use cases
Background blend mode

Common Blend Modes

styles.cssCSS

.element {
  mix-blend-mode: normal;
  mix-blend-mode: multiply;
  mix-blend-mode: screen;
  mix-blend-mode: overlay;
  mix-blend-mode: darken;
  mix-blend-mode: lighten;
  mix-blend-mode: color-dodge;
  mix-blend-mode: difference;
}

Examples

styles.cssCSS

/* Text knockout effect */
.knockout {
  background: black;
  color: white;
  mix-blend-mode: multiply;
}

/* Overlay effect on image */
.image-overlay {
  position: relative;
}

.image-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: blue;
  mix-blend-mode: overlay;
}

Background Blend Mode

styles.cssCSS

.element {
  background:
    linear-gradient(blue, red),
    url(image.jpg);
  background-blend-mode: overlay;
}

How Does writing-mode Work?

How Do CSS Counters Work?