CSS Blend Modes

CSS blend modes allow you to blend overlapping pixels.

.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;
}

There are 2 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.

.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/noise.webp), 
    	linear-gradient(
            to bottm right, 
            hsla(0, 0%, 0%, 0) 40%, 
            hsla(0, 0%, 0%, 1)
    	);
    mix-blend-mode: overlay;
}

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.

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

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

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.

.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;
}

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.

.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;
}

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.

.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;
}

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.

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

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

	width: 100%;
	aspect-ratio: 1;

	filter: brightness(2) invert(1) grayscale(1);

	background-image: var(--img), var(--img), var(--img);
	background-size: cover;
	background-position: 
		calc(50% - 1px) calc(50% - 1px), 
		calc(50% + 1px) calc(50% + 1px), 
		center;
	background-blend-mode: difference, 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.

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

button:hover {
	background: hsl(1, 54%, 48%);
}

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

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.

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

.parent {
	/* isolation: isolate; */
}

.layer2 {
	background: hsl(0, 100%, 50%);
	mix-blend-mode: difference;
}

References

Where to Next?

Notes
    
  │
  └── CSS
        
  │
  ├── 3D
        
  │
  ├── Alignment Click Target
        
YOU ARE HERE
        
  │
  ├── Blend Modes
        
  │
  ├── Box Sizing
        
  │
  ├── Floating Image
        
  │
  ├── Layout Component
        
  │
  ├── Reset
        
  │
  └── Typography Setup