Brad Woods Digital Garden

Notes
/ CSS / Blend Modes

The Warhammer 40k Adeptus Mechanicus symbol

Table of contents

    Blender

    CSS Blend Modes

    Planted: 

    Tended: 

    Status: decay

    Hits: 2446

    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/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

    Letters embossed and debossed

    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.

    3 squares layered on top of 1 another. Labeled; layer 1, button and layer 2

    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.

    Feedback

    Have any feedback about this note or just want to comment on the state of the economy?

    Where to next?