Blending modes in CSS, essential skills for making advanced special effects

Author: Ahmad Shaeed
Translator: Front-end Xiaozhi
Source: css-tricks

If you have dreams and dry goods, search [Moving the World] pay attention to this Shawanzhi who is still washing dishes in the early morning.

This article has been included in GitHub https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

What is blending?

According to Wikipedia:

Blending modes (or blend modes) in digital image editing and computer graphics are used to determine how two layers blend with each other. In most applications, the default blend mode simply hides the bottom layer by covering the bottom layer with the contents of the top layer.

In CSS, there are two properties responsible for blending. mix-blend-mode for blending DOM elements and background-blend-mode for combining multiple CSS backgrounds.

Enter mix-Blend-Mode

Basic example

Let's see how it works with a basic example. I have a circle above my title. What I'm trying to do is mix text with circles.

HTML

<div class="circle"></div>
<p>Blend Me</p>

CSS

Added mix-blend-mode: overlay to the text element to blend it with the circle.

Example source code: https://codepen.io/shadeed/pen/a9c6751c0b99d3dbb04fd9514433e09e?editors=0100

image with text

I think this is a widely used blend mode. The text is on the top, the picture is on the bottom.

Added the following to the title:

.hero-title {
    color: #000;
    mix-blend-mode: overlay;
}

More than just changing the blend mode. For example, we can increase creativity by creating animations.

In this example, I want to explore how the text blends with the foliage background. Since the image contains dark and bright spots, this can be very useful in making the text appear to be moving under each leaf.

Example source code: https://codepen.io/shadeed/pen/ef8d675755fde8087d9439b5593e1956?editors=0100

Text with SVG graphics

An interesting effect is a title on a background with vectors and shapes. It gets more interesting when the shapes are different colors.

What can we do with these blob shapes? I use MorphSVG plugin to change the path of each blog shape. This produced an interesting result.

Example source code: https://codepen.io/shadeed/pen/daa6d51bfec15e3cbaef12e8387c97f3?editors=0010

mix real elements

The effect that caught my eye was using mix-blend-mode: screen when the element had a white background and a black foreground.

Everyone said that there is no project to write on the resume, so I helped you find a project, and also attached [Building Tutorial] .

magnifying glass

I used SVG and applied the following to it. Notice how the black areas become transparent when using the screen.

Example source code: https://codepen.io/shadeed/pen/4d309070bd3855c1b87a955ac2cec95e?editors=0100

video cover

For me this is a very useful use case. I often need to add a play icon to indicate that there is a video in the article, so I ended up using an SVG that is transparent from the center.

This sounds correct, but has certain limitations. What if you want to add a hover effect to fill the triangle? This is not possible due to the subtraction of shapes in SVG. A workaround is to put a circle behind the SVG and color it on hover.

For me, that's not enough. I also want the reverse, the triangles have to be white and the rest blue.

Thanks to blend modes, I can quickly change the effect by controlling the embedded SVG on hover.

.article__play {
    mix-blend-mode: screen;  
}

.article:hover .article__play {
    mix-blend-mode: normal;
}

.article:hover .article__play {
    .play__base {
      fill: #005FFF;
    }
    
    .play__icon {
      fill: #fff;
    }
}

Example source code: https://codepen.io/shadeed/pen/e06735fd2d2fd707a37f2c4804379342?editors=0100

stored value card

Another case is using a cropped image and blending it with the background below it, with very interesting results.

img {
    position: absolute;
    right: -15px;
    top: 0;
    width: 110px;
    mix-blend-mode: screen;
}

The idea is to put the image on the right, with the title and description on the left.

Again, it can be better by adding multiple backgrounds to each card:

Example source code: https://codepen.io/shadeed/pen/a30f4ac9af6c6ec87a30f63deb2fc2c5?editors=1000

Everyone said that there is no project to write on the resume, so I helped you find a project, and also attached [Building Tutorial] .

Remove white from logo background

I knew this trick from the early days of Photoshop. Sometimes I need a brand logo and it's hard to get a transparent PNG version. With blend mode, this is easy to fix.

I mocked up the Facebook and Amazon logos and added a white background under each one.

Now to fix this, add the following CSS:

img {
    mix-blend-mode: multiply;
    filter: contrast(2);
}

Note that I added filter: contrast(2) to increase the contrast of the logo. Apply a blending effect to make them a little darker than the original color.

problem solved! Of course, I don't recommend using this feature. But if I'm forced to, I'll use it to save time, and when the original logo arrives, I can replace it and remove the blending effect.

Example source code: https://codepen.io/shadeed/pen/c8d0b773adf24901319794bda90d6a4e?editors=0100

Isolation

isolation CSS property defines whether the element must create a new stacking context (stacking context).

The main purpose of this property is that, when used in conjunction with the background-blend-mode property, it is possible to blend the background of only a specified stack of elements: it allows a group of elements to be isolated from the background behind them, and only the background of this group of elements is blended.

html

<div>
  <span>CSS is Awesome</span>
</div>

css

div {
  isolation: isolate; /* Creates a new stacking context */
}

span {
    mix-blend-mode: difference;
}

As you can see, the text "CSS is awesome" only blends within the bounds of its parent. The things outside don't get mixed up. In other words, it is isolated.

Example source code: https://codepen.io/shadeed/pen/3b84bf8730ae27563f983e036f96aacb?editors=1100

isolation can be achieved by using the property that creates a new stack context. For example, if the parent element has a opacity attribute, this will affect the result.

html

<div>
  <img src="cake.jpg" alt="">
</div>

css

div {
  opacity: 0.99; /* Creates a new stacking context, which result to an isolated group */
}

img {
  mix-blend-mode: difference;
}

Example source code: https://codepen.io/shadeed/pen/b6fcced3fba405846b2e93779282f3cb?editors=0100

Enter Background-Blend-Mode

It works like mix-blend-mode , but with multiple background images. Each background can have its own blend mode, for example.

In this example, three layers are blended together: the base image, a solid fill, and a gradient fill.

.elem {
    background: linear-gradient(45deg, #000 10%, transparent), 
              linear-gradient(#3754C7, #3754C7), 
              url(nature.jpg);
  background-size: cover;
  background-blend-mode: overlay, color;
}

In CSS, each background should be sorted in the correct way. The stacking order is top to bottom, as shown in the image above.

Example source code: https://codepen.io/shadeed/pen/b4351fd10c5ff1e0a5b210f87c1040cd?editors=1100

colorize the image

There are some interesting results than useful by using radial gradients. The idea is to add a colored image and make it blend with it.

:root {
  --color: #000;
  --size: 250px; /* Gradient Size */
}

.elem-1 {
  background: radial-gradient(circle var(--size) at center, transparent, var(--color)), 
              url(nature.jpg);
}

By applying background-blend-mode: color to the element, the result is a desaturated version of the image.

Example source code: https://codepen.io/shadeed/pen/3779d5b0ab6e013487638492573739f8

browser supports

---

Original: https://css-tricks.com/basics-css-blend-modes/

The possible bugs in the editing of cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful BUG monitoring tool Fundebug .

communicate with

If you have dreams and dry goods, search [Moving the World] attention to this Shawanzhi who is still washing dishes in the early morning.

This article has been included in GitHub https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.