The CSS background blend mode explained with examples

The CSS background blend mode property is a modern way of creating complex yet beautiful and small size backgrounds. Comparing to the image version of these backgrounds they save lots of “size issue” and more importantly a http request to the server. We will have a look at a few examples explaining the CSS background blend mode.

Example with repeating linear gradient

In this example the repeating-linear-gradient() property has been used to create an image like gradient background. The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. This is the code for this property here:

background:
repeating-linear-gradient(
    50deg,
    #F7A37B,
    #F7A37B 1em,
    #FFDEA8 1em,
    #FFDEA8 2em,
    #D0E4B0 2em,
    #D0E4B0 3em,
    #7CC5D0 3em,
    #7CC5D0 4em,
    #00A2E1 4em,
    #00A2E1 5em,
    #0085C8 5em,
    #0085C8 6em
),
repeating-linear-gradient(
    -50deg,
    #F7A37B,
    #F7A37B 1em,
    #FFDEA8 1em,
    #FFDEA8 2em,
    #D0E4B0 2em,
    #D0E4B0 3em,
    #7CC5D0 3em,
    #7CC5D0 4em,
    #00A2E1 4em,
    #00A2E1 5em,
    #0085C8 5em,
    #0085C8 6em
);

As a result it repeats the colour stops infinitely in all directions so as to cover its entire container. Now we can add the background-blend-mode. There can be several values, separated by commas:

<blend-mode> = normal <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> multiply <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> screen <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> overlay <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> darken <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> lighten <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> color-dodge <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> color-burn <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> hard-light <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> soft-light <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> difference <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> exclusion <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> hue <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> saturation <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> color <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> luminosity

Therefor in this example we use multiply. This is the pen for this example:

Try other values in CodePen and see the different effects.

An example with an image

moreover this is an example from Chris Coyier which uses the CSS background blend mode with an image:

However with the background-image property the background blend mode property determines how the element’s background images should blend with each other and with the element’s background colour.

An example with repeating radial gradient

Finally in this example the repeating-radial-gradient() function creates an image consisting of repeating gradients that radiate from an origin. Therefor it repeats the colour stops infinitely in all directions so as to cover its entire container. Have a look at the code:

background:
    repeating-radial-gradient(
        circle at top left,
        red,
        red 4em,
        transparent 4em,
        transparent 15em
    ),
    repeating-radial-gradient(
        circle at top right,
        lime,
        lime 4em,
        transparent 4em,
        transparent 15em
    ),
    repeating-radial-gradient(
        circle at bottom right,
        yellow,
        yellow 4em,
        transparent 4em,
        transparent 15em
    ),
    repeating-radial-gradient(
        circle at bottom left,
        blue,
        blue 4em,
        transparent 4em,
        transparent 15em
    ), white;
background-blend-mode: difference;

As an explanation  repeating-radial-gradient( circle at top left, red, red 4em, transparent 4em, transparent 15em ) this repeating gradient at the top left of its container starts in red and continues in red and continues in transparent in different positions. Try to change the background blend mode property to its different values and see other effects as well. This is the pen for this one:

Additionally there are lots of various effects we can try with background blend mode property. Furthermore there is a great article of advanced modes and this is a demo site to show different examples. Thanks for reading.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.