CSS blend modes

Planted: Apr 2023

Tended: Aug 2023

Status: decay

Intended Audience: Front-end developers

CSS blend modes allow you to blend overlapping pixels.

/index.css

.layer1 {
	background-image: url(https://garden.bradwoods.io/images/waves.webp);
}

.layer2 {
	width: 24%;
	height: 100%;

	position: absolute;
	top: 0;
	right: 8%;
	background: hsl(0, 100%, 50%);
	mix-blend-mode: difference;
}

.layer1
.layer2 (no blend mode)
.layer2 (blend mode)

There are two properties that enable blending:

▪ background-blend-mode: blends the element's background values.
▪ mix-blend-mode: blends the element's content, background and content of its parent.

Their value specifies how overlapping pixels interact:

▪ normal: no blending
▪ Darken:
- ▪ darken
  ▪ multiple
- ▪ color-burn
▪ Lighten:
- ▪ lighten
- ▪ screen
- ▪ color-dodge
▪ Adjust Contrast:
- ▪ overlay
- ▪ soft-light
- ▪ hard-light
▪ Invert Colors:
- ▪ difference
- ▪ exclusion
▪ Change individual HSL components:
- ▪ hue
- ▪ saturation
- ▪ luminosity
- ▪ color

Paper

Using overlay, a color, noise image, shadow and gradient can blend to produce a paper effect. overlay makes dark colors darker and light lighter. Mid-range, like 50% gray, are unaffected.

/index.css

.layer1 {
	background: hsl(40, 35%, 76%);
}

.layer2 {
	box-shadow: inset 0 0 40px 10px hsla(0, 0%, 0%, 0.8);
	background: 
		url(https://garden.bradwoods.io/images/texture/noise.webp), 
		linear-gradient(
			to bottm right, 
			hsla(0, 0%, 0%, 0) 40%, 
			hsla(0, 0%, 0%, 1)
		);
	mix-blend-mode: overlay;
}

.layer1
.layer2 (no blend mode)
.layer2 (blend mode)

Colored area

HSLA is a way to describe color in CSS. For example: hsla(40, 35%, 76%, 1). Representing: hsla(<hue>, <saturation>, <lightness>, <alpha>).

<saturation> defines how much gray is in the color:

▪ 100%: there is no gray.
▪ 0%: the color is completely gray.

mix-blend-mode: saturation takes:

▪ the saturation value from the top layer,
▪ hue and lightness values from the bottom layer.

If we use a black and transparent gradient for the top layer and an image for the bottom. Any part of the image covered by the black will be grayscale. Because black has a saturation value of 0. Any part covered by the transparent part will be uneffected.

/index.css

.layer1 {
	background-image: url(https://garden.bradwoods.io/images/waves.webp);
}

.layer2 {
	background: linear-gradient(
		90deg, 
		hsla(0, 0%, 0%, 1) 50%, 
		hsla(0, 0%, 0%, 0) 50%, 
		hsla(0, 0%, 0%, 0) 80%, 
		hsla(0, 0%, 0%, 1) 80%
	);
	mix-blend-mode: saturation;
}

.layer1
.layer2 (no blend mode)
.layer2 (blend mode)

Duotone

A duotone image is an image made up of two colors. Made by converting an image to grayscale then replacing the darks with one color and the lights with another. We can create the same effect using:

▪ multiple for the dark color. It multiplies color channels together. The result is darker than the original.
▪ screen for the light color. It does the same as multiple, but inverted. The result is lighter than the original.

/index.css

.layer1 {
	background-image: url(https://garden.bradwoods.io/images/waves.webp);
	filter: grayscale(1) brightness(110%);
}

.layer2 {
	background: hsl(240, 100%, 53%);
	mix-blend-mode: screen;
}

.layer3 {
	background: hsl(330, 100%, 71%);
	mix-blend-mode: multiply;
}

.layer1
.layer2 (no blend mode)
.layer3 (no blend mode)
.layer3 (blend mode)

Halftone

Halftone is a reprographic technique. Instead of representing an image with colors and lines, it is represented with same color dots. Varying in size, shape and spacing. We can create a halftone effect mix-blend-mode: hard-light. It produces a vivid contrast.

/index.css

.parent {
	--dot-size: 2px;
	--line-color: hsl(0, 0%, 11%);
	--line-contrast: 2000%;
	--photo-brightness: 70%;
	--photo-contrast: 100%;

	filter: contrast(2000%);
}

.layer2 {
	transform: rotate(20deg);
	background: radial-gradient(
		circle at center, 
		var(--line-color),
		hsl(0, 0%, 100%)
	);
	background-size: var(--dot-size) var(--dot-size);
}

.layer3 {
	background: url(https://garden.bradwoods.io/images/waves.webp);
	filter: 
		grayscale(1) 
		brightness(var(--photo-brightness)) 
		contrast(var(--photo-contrast)) 
	mix-blend-mode: hard-light;
}

.parent
.layer2 (no blend mode)
.layer3 (no blend mode)
.layer3 (blend mode)

Scan lines

Scan lines can be added to an image using mix-blend-mode: overlay. If:

▪ the background is light, it makes the foreground lighter,
▪ the background is dark, it makes the foreground darker.

/index.css

.layer1 {
	--line-width: 4px;
	background-image: url(https://garden.bradwoods.io/images/waves.webp);
}

.layer2 {
	background: repeating-linear-gradient(
		transparent 0,
		hsl(0, 0%, 0%) calc(var(--line-width) / 2),
		transparent var(--line-width)
	);
	mix-blend-mode: overlay;
}

.layer1
.layer2 (no blend mode)
.layer2 (blend mode)

Emboss

Embossing is where parts of an image are raised above the surface. Debossing indents parts of an image. We can create this effect use 3 copies of an image. 1 set in the center. 1 moved up and left. The other down and right. Combined with two blend modes on the same layer, difference and screen.

Interactions

Users can interact with blend effects. The paper example above had:

▪ layer 1: background color and
▪ layer 2: a noise image, shadow, gradient and blend mode.

If we insert a button between the two layers with a background color on hover. Layer 2 will interact with the button's background instead of layer 1's when hovered.

Prevent blending

Blending with another element can be prevented by adding a parent element with isolation: isolate. It creates a new stacking context. Making the parent the base layer. Preventing blending with the backdrop layer. Uncomment isolation: isolate; in the example below to disable blending.