Background-blend-mode

Css background-blend-mode

Let’s go over an example with a blend mode. We’ll use the multiply blend mode in this instance, which multiplies the pixel values of the top layer with those of the bottom layer, resulting in a darker image. The effect is similar to shining two colored lights onto a white wall.

Consider the following HTML structure, where we have a div with some content:

<div class="blend-demo">
    <h1>Title</h1>
    <p>Some text content...</p>
</div>

We want to apply a background image to this div, and then apply a color layer on top of the image using a blend mode.

Here is the CSS:

.blend-demo {
    position: relative;
    background-color: #ff6347; /* tomato color for blending with image */
    color: white; /* text color */
    overflow: hidden;
}

.blend-demo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('path-to-your-image.jpg');
    background-size: cover;
    mix-blend-mode: multiply; /* using multiply blend mode */
    z-index: -1; /* positioning the pseudo-element behind the actual content */
}

Here’s what this code does:

First, it styles the .blend-demo div itself. It sets the div’s position as relative, which allows absolute positioning of child elements (like the ::after pseudo-element) relative to it. It also sets the background color to tomato and the text color to white.
Then it creates an ::after pseudo-element, sets its position to absolute, and sizes it to fill the entire .blend-demo div (top, left, width, and height).
It sets the background of the pseudo-element to the desired image using background-image and background-size: cover; ensures the image covers the entire div.
The mix-blend-mode: multiply; line applies the multiply blend mode. This causes the pseudo-element (which contains the image) and the .blend-demo div’s background color to blend together.
Finally, z-index: -1; places the ::after pseudo-element behind the actual content of the .blend-demo div, preventing it from obscuring the text.

Now, the content inside the div appears over a background that is a blend of the tomato color and the image, creating a visually interesting effect. The blend mode multiply gives the image a darker, richer feel by combining it with the tomato color.

Please make sure to replace 'path-to-your-image.jpg' with the actual path to your image. Also, as always, do check the browser compatibility for mix-blend-mode and background-size properties before using.

List of blend-modes

Here is a list of CSS background-blend-mode values and a brief description of each. They don’t really have “ranges” like some other CSS properties do, instead, each one represents a different algorithm used to blend the colors of each pixel of the overlaid images:

normal: This is the default value. No blending is performed, and the top image obscures the one beneath completely, according to its level of transparency.
multiply: Pixels of the top image are multiplied with those of the image below and divided by 255, making the image darker.
screen: The values of the pixels in the two layers are inverted, multiplied, and then inverted again, making the resulting image lighter. This is sort of the opposite of multiply.
overlay: Combines multiply and screen blend modes. The parts of the top image that are pure white result in pure white, the parts that are pure black result in pure black. Great for adding texture to images.
darken: Retains the darkest pixels from each overlapping image layer.
lighten: Retains the lightest pixels from each overlapping image layer.
color-dodge: Brightens the lower layer based on the values of the top layer.
color-burn: Darkens the lower layer based on the values of the top layer.
hard-light: Similar to overlay, but with the roles of the layers reversed.
soft-light: Similar to hard-light, but with a softer contrast.
difference: Subtracts the darker of the two constituent colors from the lighter one.
exclusion: Similar to difference, but with a lower contrast.
hue: Creates an effect with the hue of the top layer and the luminosity and saturation of the bottom layer.
saturation: Creates an effect with the saturation of the top layer and the hue and luminosity of the bottom layer.
color: Creates an effect with the hue and saturation of the top layer and the luminosity of the bottom layer.
luminosity: Creates an effect with the luminosity of the top layer and the hue and saturation of the bottom layer.

Cool uses

Blend modes can be used in a number of creative ways to make your website more visually engaging. Here’s one idea: you could use them to create a dynamic hover effect on an image link.

Here’s a simple example:

<a class="image-link" href="#">
    <span class="image-text">Hover over me!</span>
</a>

For the CSS:

.image-link {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 200px;
    background-image: url('path-to-your-image.jpg');
    background-size: cover;
    color: white;
    text-decoration: none;
}

.image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    text-align: center;
    mix-blend-mode: difference; /* This blend mode will make the text color contrast with the background. */
}

.image-link:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5); /* Semi-transparent white background on hover */
}

In this code, the image-link class has a background image and contains some text. The text uses the difference blend mode, which essentially inverts the color of the text based on the colors underneath, making sure the text is always readable regardless of the background image.

When you hover over the link, a semi-transparent white layer (::after pseudo-element) covers the image, lightening the entire image and changing the appearance of the text due to the blend mode. The effect is a dynamic color change that grabs the user’s attention.

Remember to replace 'path-to-your-image.jpg' with the actual path to your image. Also, as always, check the browser compatibility for mix-blend-mode and background-size properties before using.

This is just one example. The possibilities with blend modes are vast and can be used to create various visual effects like duotone images, color-changing effects, contrast enhancements, etc. Be creative and experiment with different blend modes and color/image combinations to find what works best for your design!

Here’s another creative example using blend modes to create a ‘frosted glass’ effect. This effect is often seen in modern user interfaces, where a semi-transparent element blurs the content behind it.

HTML structure:

<div class="frosted-glass">
    <h1>Hello, World!</h1>
</div>

CSS:

body {
    background: url('path-to-your-image.jpg');
    background-size: cover;
    height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frosted-glass {
    width: 300px;
    height: 200px;
    background: inherit;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.frosted-glass::before {
    content: "";
    position: absolute;
    background: inherit;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 1000px rgba(255,255,255,0.3); /* white with 30% opacity */
    mix-blend-mode: overlay;
}

What this does:

The body is set to be a flex container and the background is set to a specified image. The align-items: center; and justify-content: center; properties are used to place the .frosted-glass div at the center of the page.
The .frosted-glass div has its background set to inherit, which means it will take the background of its parent element (body in this case). The backdrop-filter: blur(5px); will blur any element behind the div.
The ::before pseudo-element is added to the .frosted-glass div. The pseudo-element inherits the background from its parent and is as large as its parent. It has a white overlay (using box-shadow and rgba to create a white overlay with 30% opacity), which is blended with the background using the overlay blend mode.
This results in a frosted glass effect, where the background image is visible but blurred and lightened behind the .frosted-glass div.

Remember to replace 'path-to-your-image.jpg' with the actual path to your image. Also, as always, check the browser compatibility for mix-blend-mode, backdrop-filter, and background-size properties before using.

The backdrop-filter property is not fully supported in all browsers (as of my knowledge cutoff in September 2021). You may want to consider a fallback or progressive enhancement strategy when using it.

Css background-blend-mode

List of blend-modes

Cool uses

More