CSS Blend Modes: Basics and Getting Started

Alex Anie

Posted On: October 30, 2023

view count160042 Views

Read time19 Min Read

Blending images together is not new in the design world, but when it comes to the web, things can be tricky or complex, depending on your chosen approach.

Previously, designers and developers relied on manually creating blended images using image editing software like Photoshop or Illustrator. However, this is no longer necessary, as CSS now allows for blending modes to be applied directly.

With the use of CSS blend modes, web designers can create stunning and eye-catching visual effects that can improve the website’s user interface and how users interact with it. However, blend modes can also serve as a good source of contrast.

For example, we can apply CSS blend modes to hero images on website landing pages to provide visual contrast from element content and its parent background. This can be done using the different available blend mode values such as multiply, screen, overlay, darken, and others.

In this tutorial, we will focus on CSS blend modes, background-blend-mode, and mix-blend-mode properties in detail and how to implement them to create a visually appealing and stunning website.

What are CSS Blend Modes?

CSS blend modes (compositing) refer to how two or multiple element layers are combined together to form a single layer. Layers, in this case, refer to the element’s background color, background image, or the element content.

compositing

This can be very useful when we need to blend an element background-image(s) with the element background-color; in this case, we use the CSS background-blend-mode property. However, when we need to blend the element’s content with the background of its parent element and content, we use the CSS mix-blend-mode property.

Here are some of the real-world websites that effectively use CSS blend mode.

 real-world websites that effectively use CSS blend

Source

Here, the background-image and background-color are blended together, as seen on the CodeinWP website. This makes the background-color an overlay of the background-image and simultaneously creates a contrast between the content on the website from its overlay background.

Furthermore, below is another use case is where CSS blend mode is used:

another use case is where CSS blend mode

Source

The Infosys website uses CSS blend modes to blend the background-image with the background-color, which can be done using CSS background-blend-mode
to improve the readability of text and enhance the website contrast.

This is very useful when separating content from its background or making images appear faint so that text can be visible.

However, Netflix also provides a good use case for how CSS blend modes can be implemented. The example here indicates the use of mix-blend-mode to add blend modes to a background image that is separate or independent of its parent.

image that is separate or independent of its parent

Source

This can be used in areas where the content and the background of the parent need to be separated to provide a good contrast and improve readability.

Navigating websites that implement good uses of CSS blend mode on images and hero images can improve readability and make it more accessible to users with poor visuals.

Values of CSS Blend Mode

CSS blend mode values are keyword values used to set how an element’s layers should be blended.



Values Definitions
normal This is the default blend mode. No changes or blend mode is applied.
multiply The multiply blend mode multiplies the darker areas of the layers. Depending on the colors of the layers, the white layers are turned to transparent, and lighter colors are reduced.
screen The screen blend mode increases the lighter areas of the layers and completely removes or reduces the darker parts of the layers. It behaves like the opposite of multiply.
overlay It is based on the colors of the layers. The overlay can either function as a screen or multiply, then the result is increased.
darken The darker parts of the layers are increased, while the whites become transparent or fade.
lighten The lighter parts of the layers are increased while the darks are removed.
color-dodge It removes all blacks or darker colors and increases the lighter color. Lighter colors become brighter, and darks are removed.
color-burn Lighter parts of the layers are removed. Darker parts are multiplied and concentrated.
hard-light Its result is darker if the top layer is dark or lighter if the layer is light. However, the lightness is increased.

The hard-light function is based on the colors in the layers and how they appear.

soft-light It might either brighten the colors and remove the darker areas or darken the colors and remove the lighter areas.
difference It subtracts the background-color layer from the background-image color layer or the color in the background-image from the background-color.
If the background-color is white, it inverts, and if the background-color is black, no change is made to the background-image.
exclusion It behaves similarly like difference but with less contrast.
hue It takes the hue from the background-color and applies it to the saturation and luminosity of the background-image.
saturation It takes the saturation from the background-color and applies it to the hue and luminosity of the background-image.
color It takes the saturation and hue from the background-color and applies it to the luminosity of the background-image.
luminosity It takes the luminosity of the background-color and applies it to the hue and saturation of the background-image.

HTML:

CSS:

Preview:

Preview: 1

See the Pen
blend mode values
by Ocxigin (@ocxigin)
on CodePen.

From the browser preview, we created sixteen elements and applied a background image of a white star with a gradient background.

Each element takes a different CSS blend mode within its container, determining how the image is rendered. For example, the multiply blend mode completely removes the white from the star, making it transparent and revealing the teal background color. The gradient color becomes darker.

The third element screen does the opposite; it increases the brightness of the gradient by making it lighter and then keeps the white color on the star.

However, to make the element responsive, we implement CSS media queries to add different breakpoints on different screen sizes. By defining breakpoints in CSS, you can apply unique styles and layouts for small screens (mobile devices), medium-sized screens (tablets), and larger screens (desktop monitors).

CSS background-blend-mode Property

The CSS background-blend-mode property is used to set how the background images and background color of the same element should blend based on the CSS blend mode value provided.

Syntax:

To apply a background-blend-mode to an element, the specified element takes in the background image(s), background-color (which can either be a solid color or gradient), and then the background-blend-mode property with a CSS blend mode value.

Preview:

Preview: 2

See the Pen
background blend mode
by Ocxigin (@ocxigin)
on CodePen.

HTML:

CSS:

JavaScript:

From the code example above, we created a simple landing page with three buttons for changing different background images and another button for changing CSS blend modes.

When you click on the image button, it changes and updates the background-image from the imgData object.

The blend button changes the CSS blend mode value when a new value is selected from the listed option.

Blending Solid Colors With background-blend-mode

Solid colors are assigned with a single value, this can either be red, blue, purple or hex code (#800080) value or rgb(red, green, blue) values. These colors do not have an alpha channel (transparency).

The background-color and the CSS blend mode value applied will determine how the image will render. For example, a background-color of black and a blend mode of luminosity will make a color image render as a grayscale image. And if the specified blend mode is multiply, the background color will multiply, making the image render darker or completely black if transparency is not added to the background-color. However, if specified, the screen blend mode value will completely wipe out the black or dark areas of the image.

black or dark areas of the image

See the Pen
background blend mode and color wheel
by Ocxigin (@ocxigin)
on CodePen.

Here, we have a grayscale image, change the background-color and toggle the color wheel to experiment with different CSS blend modes.

HTML:

CSS:

JavaScript:

Blending Gradient Colors With background-blend-mode

We’ve talked about blending solid colors. However, gradient colors can also be blended with background-blend-mode. This is very useful when blending multiple colors with a specified image or images of an element.

blending multiple colors with a specified image or images

See the Pen
background blend mode gradient
by Ocxigin (@ocxigin)
on CodePen.

Here, the CSS blend mode of color is specified with a linear-gradient to give a gradient blending mode.

To apply gradient blend mode, apply the linear-gradient with a background image on the background property.

linear-gradient

HTML:

CSS:

Blending Multiple Images With multiple blend-mode

If it’s possible to add linear gradients using the background property, it’s also possible to add multiple images with the background property and then blend it with specified CSS blend mode or multiple CSS blend modes.

Blending Multiple Images With multiple blend-mode

See the Pen
background-blend-mode- with multiply images
by Ocxigin (@ocxigin)
on CodePen.

Here, from the above browser preview, we use the image of an office with the image of a city and then apply a blend mode of overlay.

You can specify more than two images with multiple CSS blend mode values. However, if the number of blend modes exceeds the number of images, the CSS blend mode values are truncated to fit the number of images specified.

HTML:

CSS:

Applying Hover Effect to background-blend-mode

The background-blend-mode can also be changed on hover. This allows the use of different CSS blend mode values on state change.

It can be handy when changing the CSS blend mode as the user hovers over the element, improving user interaction.

Applying Hover Effect to background-blend-mode

See the Pen
Hover effect on background-blend-mode
by Ocxigin (@ocxigin)
on CodePen.

Here, we apply a background-image with a background-color of blue and set the CSS blend mode to overlay while in a hover state. We set the blend mode to normal to display the original image without a blend mode.

HTML:

CSS:

Desktop preview:

Desktop preview:

The above browser preview is rendered with LT Browser for developer- next-gen browser to build, test & debug.

LT Browser is a free, open-source, Chromium-based, developer-friendly browser for testing and debugging mobile-friendly websites and web apps across 50+ device viewports. It is developed by LambdaTest, an AI-powered test orchestration and execution platform.

LT Browser offers several features that make it ideal for web developers, including:

  • Responsive testing: Test your website on various device viewports for responsiveness, including smartphones, tablets, and laptops, without owning them physically.
  • Network throttling: Test your website on different network conditions, such as slow 3G or offline mode. This can help you to identify and fix any performance issues.
  • Side-by-side view: View your website on multiple screen sizes side-by-side, making it easy to compare the different renderings.
  • Screenshot and video recording: Capture screenshots and record videos of your testing sessions. This can be useful for sharing with other developers or for debugging purposes.
  • To get started, check out the documentation – Getting Started With LT Browser.

    Check out the below tutorial on LT Browser to get started.

    Catch up with the latest tutorials on mobile app testing, automation testing, and more — Subscribe to the LambdaTest YouTube Channel.

    Tablet preview:

    Tablet preview:

    Mobile preview:

    Mobile preview:

    Applying Transitions to background-blend-mode

    At the time of writing this CSS tutorial, by default, the background-blend-mode is not animatable. This also means it can not be transitioned. However, we can apply transition to the background-color of the element. This will help fade and transition the blend mode when a user hover on it.


    See the Pen
    Transition to background-blend-mode
    by Ocxigin (@ocxigin)
    on CodePen.

    Here, instead of changing the CSS blend mode value on hover state as we did earlier, we change the background-color from a solid blue to a transparent value. This will help create a subtle transition of the CSS blend mode when a user hover on it.

    subtle transition of the CSS blend mode

    Browser Compatibility of background-blend-mode

    The background-blend-mode is widely supported in the latest versions of modern web browsers. However it’s not supported in earlier versions of most browsers.

    Browser Compatibility of background-blend-mode

    Source

    To ensure that your website’s background-blend-mode compatibility is up to par, it is important to test it across a wide range of browsers and devices. LambdaTest is an AI-powered test orchestration and execution platform that allows you to do just that.

    With LambdaTest, you can easily test your website’s background-blend-mode compatibility across an online browser farm of 3000+ real browsers, devices, and platforms. This gives you the confidence that your website will look and function as expected for all users, regardless of their browser or device. You can even test your web apps on a mobile device lab of real Android and iOS devices.

    Check the documentation to get started – Real Time Browser Testing.

    CSS mix-blend-mode Property

    The CSS mix-blend-mode property sets how the element’s content should blend with the parent content and background.

    Syntax:

    When mix-blend-mode is applied to an element, it blends the text content with the background of the parent element. And if the specified element has a background color set and depending on the color set on the background, the text context may invert, fade, or appear not visible.

    Below is an example where blending is improper and compromises the overall readability.

    overall readability

    See the Pen
    mix-blend mode
    by Ocxigin (@ocxigin)
    on CodePen.

    In the above image, the text content and logo are not visible. This is due to the mix-blend-mode blending the element’s content, that is, the text, logo, and background-color with the parent background image.

    HTML:

    CSS:

    Applying mix-blend-mode to pseudo-element

    From the previous example, we saw how the mix-blend-mode blends both the content of the element with the background of the parent element.

    While this may hamper readability and accessibility, we can use pseudo-element as the CSS blend mode and isolate the pseudo-element from the background of the parent so it will serve as an overlay for the element’s content.

    Here is an example of the same.

    mix blend mode

    See the Pen
    mix blend mode with pseudo-element
    by Ocxigin (@ocxigin)
    on CodePen.

    We created a pseudo-element and set it to inherit the properties of its parent, specifically in terms of width and height. We applied a background color and set the CSS blend mode to multiply to increase the darkness of the background-color and translucency.

    However, with the z-index of -1, the pseudo-element was positioned at the back of the background-image, and to bring it to the foreground of the background-image, we set the isolate property for isolation.

    HTML:

    CSS:

    Blending Gradient Colors With mix-blend-mode

    We can also blend gradient colors with mix-blend-mode, this can be very useful when we want to improve the user interface to something much more beautiful or add contrast to content from the blended background.

    Blending Gradient Colors

    See the Pen
    mix-blend mode gradient
    by Ocxigin (@ocxigin)
    on CodePen.

    From the example above, we added contrast to the text content below by using linear-gradient to add black to the base color from the design.

    base color

    Applying Hover Effect to mix-blend-mode

    Applying the hover effect to mix-blend-mode can improve how users interact with elements on state change.

    This is when a user moves their mouse over an element on the web page. However, the mix-blend-mode is not animatable, which means it can’t also be transitioned.
    To learn more about hover effects, check out this tutorial – CSS Hover Effects.

    Applying hover effects to properties that are not animatable, such as mix-blend-mode can lead to a laggy transition during a state change. This can be improved by applying the hover effect to animatable properties that directly affect the property that needs transition.

    The example below explains how this is done.


    See the Pen
    mix-blend-mode hover effect
    by Ocxigin (@ocxigin)
    on CodePen.

    Here, from the above example, we applied transition and hover to the height property so that the mix-blend-mode can transition with the height property.

    HTML:

    CSS:

    Desktop preview:

    Desktop preview

    We apply media queries to the above elements to make it responsive and functional across different screen sizes and devices, which range from desktops, tablets, and mobile phones.

    This is very useful for modern websites and web apps that run on multiple screen sizes on the web. The example below shows how media queries are rendered on a tablet device.

    css media queries

    Mobile preview:

    Mobile preview

    Cut-Out Effect With mix-blend-mode

    We’ve seen many code examples of what CSS blend modes can do. However, the example here shows how to create a cut-out effect using the mix-blend-mode property.

    Cut-Out Effect

    See the Pen
    cut-out effect with blend-mode
    by Ocxigin (@ocxigin)
    on CodePen.

    Here, both the logo and the text color are blended out. This is due to the black color applied to both the logo and the text and a blend screen mode.

    However, the border only becomes transparent. It will be blended out if a black color is applied to the border.

    HTML:

    CSS:

    Applying mix-blend-mode to SVG Elements

    Scalable Vector Graphics (SVG) are powerful vector graphics that can scale and still maintain resolutions across different screen sizes or devices such as desktop, tablet and mobile phones.

    Using SVGs can improve website performance and optimization. This is why SVGs are so useful and can be implemented as buttons, icons and complex illustrations, SVGs can take different forms which makes it a perfect fit for small and large graphics.

    SVGs can also be blended using the mix-blend-mode. The mix-blend-mode can enhance how different elements render on the page. SVGs can also be useful for creating effects such as transitions and animation that respond to user interactions on state change, such as hover state.

    However, SVGs load faster since they can be embedded directly on web pages without fetching images from the server. This will help to boost performance and load time.

    boost performance and load time

    See the Pen
    mix-blend-mode svg
    by Ocxigin (@ocxigin)
    on CodePen.

    In the above browser preview, the CSS blend mode occurs where each circle intersects.

    HTML:

    CSS:

    Browser Compatibility of mix-blend-mode

    The mix-blend-mode is widely supported in latest versions of modern browsers. However it’s not supported in earlier versions of most browsers.

    Browser Compatibility

    Source

    Info Note

    Test your web apps for compatibility across 3000+ real browsers. Try LambdaTest Today!

    Differences: background-blend-mode and mix-blend-mode

    The background-blend-mode and mix-blend-mode function similarly, but there are some key differences. Understanding these differences can help you decide which one to use when working on your next project.

    Property background-blend-mode mix-blend-mode
    Definitions Blends the background color with the background images of the same element Blends the element’s content with the parent content and background.
    Values blend modes blend modes
    Initial normal normal
    Applies to All HTML elements All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
    Inherited No No
    Isolation property No Yes
    Computed value As specified As specified
    Animatable No No

    Depending on your work, the background-blend-mode, and mix-mode-mode are meant to solve the same problems, adding blending to web elements.

    But at times, they both can be confusing since the two properties take on the same values. The background-blend-mode is used for blending the background color with the background images of the same element; it does not affect the content of the element or parent background, while the mix-blend-mode is used to blend the element’s content with the parent content and background.

    Conclusion

    CSS blend modes can be useful on websites or mobile applications. The background-blend-mode and mix-blend-mode behave the same way but do different things.

    With the background-blend-mode, the background-color and background-images can be blended together as a single image. However, the mix-blend-mode makes it possible to blend the content of an element with the content of the parent and its background.

    Frequently Asked Questions (FAQs)

    What is blend mode in CSS?

    CSS blend mode is a feature that allows you to control how an element’s content should blend with the content behind it. This feature is typically used in the context of two or more overlapping elements, where the blending mode determines the visual effect of their interaction.

    How do you set blend mode in CSS?

    To set a CSS blend mode, you can use the mix-blend-mode and background-blend-mode properties to blend the content of one element with the content behind it.

    What are blend modes used for?

    CSS blend modes are used to control how the content of one element blends or interacts with the content or background of another element. They are primarily used for creative and visual effects in web design.

Author Profile Author Profile Author Profile

Author’s Profile

Alex Anie

A Front End Technical Writer. I write blogs on Front End Technologies, such as HTML, CSS, JavaScript. When I am not coding, I enjoy watching tutorials and listening to twitter spaces. I live in Lagos, Nigeria

Blogs: 16



linkedintwitter

Test Your Web Or Mobile Apps On 3000+ Browsers

Signup for free