Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

CSS Blend Modes

14:44 with Guil Hernandez

CSS blend modes define how two or more layers are blended together, and let you create some really exciting visual effects! Blending effects are frequently used in graphic design or digital image editing. But you can recreate those same blending effects in the browser using CSS Blend modes.

Teacher's Notes
Video Transcript
Downloads

Fork this workspace to follow along.

Quick Reference

Browser Support

Blend Mode Examples

Tools

[MUSIC] 0:00

Hey everyone. 0:04

Guil here. 0:05

In this workshop, I'll show you how to use an exciting CSS feature that resembles 0:06

a tool you'd normally find in your favorite graphics editor, blend modes. 0:10

So CSS blend modes define how two or more layers are blended together and 0:15

they let you create some really exciting visual effects. 0:20

Now, these blending effects are frequently used in graphic design or 0:23

digital image editing, but you can recreate those same blending effects 0:27

in the browser, using CSS blend modes. 0:30

Let me show you how. 0:33

Blend modes are part of compositing and blending CSS specification. 0:34

So, what's compositing and blending? 0:39

Well compositing is what combines an element with its backdrop. 0:41

And the back drop is the content behind the element. 0:44

Now blending is a form of compositing that calculates the mixing of colors 0:48

wherever an element and a backdrop overlap. 0:53

Now with CSS we can blend an HTML element's background layer 0:56

with another layer. 0:59

And the background layer can be an image, a gradient or a background color. 1:00

So, before we move on let's first take a look at a few 1:05

neat examples of the effects we're able to achieve with CSS blend modes. 1:08

So in this first example created by Adobe, 1:13

we can see how the main background image is originally black and 1:17

white but then we're able to see how the hues change once they're blended 1:21

with the different background colors of the main development in the foreground. 1:26

Pretty cool. 1:31

So, next, we have a fun and creative demo by Bennett Feely, 1:32

that shows some of the potential presidential candidates. 1:37

Now, what's cool about this is, is that the images of the Democratic party 1:40

candidates blend with a blue background layer, while the Republican 1:44

party images blend with a red background layer as you can see here. 1:49

And what's neat is that on hover, 1:54

the images transition back to the original image. 1:56

So a nice subtle effect and a great use of CSS blend modes. 1:59

So now I'm gonna show you how to create a few of your own blending effects with CSS. 2:04

CSS currently has two properties you can use to blend elements together 2:09

using one of the 16 available blend modes. 2:14

Those properties are background-blend-mode and mix-blend-mode. 2:17

So first you can use the background-blend-mode 2:22

property when you want to blend two or more background layers. 2:25

And the mixed-blend-mode property will let you blend with the content of any HTML or 2:29

SVG element that's painted underneath. 2:34

So first, 2:37

we'll take a look at what we're able to do with the background-blend-mode property. 2:37

So now I'm gonna jump on over to my project files 2:42

where I already have an HTML file linked to a style sheet. 2:45

And this is where we're going to create our blending effects. 2:49

Now when I preview the web page, you can see that it's nothing 2:52

more than a nice full-page background image and some content. 2:56

So the background blend mode property is commonly used to blend together 3:00

an element's background image with another image behind it or a background color. 3:04

And when we specify the background-blend-mode property and 3:09

a blend mode value it mixes that background image and 3:12

color together based on the blend mode we set. 3:16

And that mixing of colors only happen wherever an element 3:19

overlaps with it's backdrop. 3:23

So let's see how this happens. 3:24

I'm going to go back to the style sheet. 3:26

And scroll down to the body rule. 3:29

And I'm going to give the body element a background color. 3:32

So I'm going to add a hex value in this background declaration of 3:36

6de590. 3:41

And when we preview the color, we can see that it's a light shade of green. 3:47

So, now, the green background color layer 3:51

is our backdrop; it's behind the main background image where it usually is. 3:54

So, nothing special is happening just yet. 3:58

But watch what happens if we go back and add a blend mode to the body element. 4:00

So right beneath the background declaration, let's add the CSS property 4:06

background-blend-mode. 4:10

So the default value for 4:16

background-blend-mode is normal, which specifies no blending. 4:18

So let's see how the value multiply will affect our background layers. 4:22

[BLANK_AUDIO] 4:27

So just like in a graphics editor like Photoshop, 4:32

the multiply blend mode darkens the image by multiplying the colors in the body's 4:35

element background image by that light green background color we defined. 4:40

Really neat. 4:45

If you wanna learn all about the 16 different blend mode values, you can check 4:46

out the link to the web platform docs on blend modes in the teacher's notes. 4:51

Now, as you might have noticed, these are pretty much the same blend modes that come 4:56

in a graphics editor like Photoshop or Sketch. 5:00

And each of these values will give you a different result. 5:03

So, while we're here, let's try out a few more of these blend modes. 5:06

So let's try screen, for instance. 5:10

So back in the style sheet, I'm going to change the value multiply to screen. 5:13

With screen, the blended result color depends on the backdrop's color. 5:21

So, if screening any color with white, will produce all white, 5:25

while screening with black will leave our background unchanged. 5:29

So here since our background color is a light shade of green, once we 5:33

preview our web page, we can see how the screen blend mode lightens our background. 5:38

So let's go back and try a couple more. 5:43

So now we're going to replace screen with the overlay blend mode. 5:45

And once we save and refresh, we can see that it lightens or 5:51

screens the colors to reflect the lightness of the green backdrop color. 5:55

It actually overlays the background image, while preserving it's highlights and 6:00

shadows. 6:04

Cool. 6:06

So let's do one more. 6:06

Let's go back and try the blend mode value hard-light. 6:07

So once I save and refresh our web page, 6:13

we can see how this multiplies or screens the colors. 6:16

And it also depends on the source color value. 6:20

Now in this case, 6:22

the effect is similar to shining a bright spotlight on the background. 6:23

We get this hard contrast in our image. 6:27

Let's go back and stick with the multiply blend mode moving forward. 6:31

What's also great about background-blend-mode 6:36

is that we're able to use it all HTML elements, even canvas and video elements. 6:39

And it also works with CSS gradients and multiple backgrounds. 6:44

And this can create some interesting effects. 6:47

So for example, let's go back to our style sheet. 6:50

And instead of a background color, let's make the backdrop a CSS gradient. 6:53

Now gradients are actually background images. 6:58

They're not colors. 7:01

So we'll need to use the multiple background syntax. 7:02

So first I'm going to remove the background color value we just defined. 7:06

And as the second background value we're going to declare a radial-gradient. 7:11

So let's type radial-gradient. 7:16

And let's make the first color a hex value of 6de590. 7:20

And let's make the second 7:27

color #e67478. 7:31

All right, so once we save our style sheet and 7:36

refresh the web page, notice how we get a really nice effect 7:40

that blends the images according to the colors of that radial-gradient. 7:44

Now, I'm gonna go back to the style sheet. 7:49

And this time I'm going to set it as a linear-gradient to see what happens. 7:51

So once I save and refresh, we get the same effect except now the browser 7:56

multiplies the colors based on the progression colors in the linear gradient. 8:01

We're also able to blend any HTML or SVG element with our backdrop or 8:07

any content underneath. 8:11

And again, this can create some really cool effects. 8:13

So lets try this out on our heading next. 8:16

So in the index.html, file notice the span elements nested inside the h1. 8:20

Each letter is wrapped in a span. 8:27

Now those are there for a reason and you'll see why in just a bit. 8:30

So, first, we're gonna need these letters in the heading here to overlap. 8:34

So I'm going to define a letter spacing property for the h1. 8:40

So in the h1 rule, let's say letter-spacing and 8:45

then I'm going to use a negative value to make the letters overlap. 8:49

So I'm gonna make the value -2rem. 8:53

And I'm also going to give the heading 1 a color. 8:55

So I'll set to the hex value 6b845d. 9:00

So once I save and refresh, we're now able to see the letters 9:07

overlapping each other but they're all the same color so it's kind of hard to tell. 9:12

So next, to see the blending effects wherever the letters overlap, 9:16

I'll need to make them different colors and this is why I originally wrapped each 9:21

letter inside a span element so I can target and style them individually. 9:25

So, to do this, 9:30

I'm going to use the nth-child pseudoclass to target each individual letter. 9:31

So we've already set one of the colors to that shade of green. 9:35

So that'll be the first letter's color. 9:38

So let's select the second one by saying span nth-child. 9:40

And inside the parenthesis I'm gonna say that I wanna target the second 9:46

span element. 9:50

And then I'll set the color to #801b3a. 9:52

And this gives me a darker shade of red. 9:58

So next I'm just gonna copy the one I wrote and 10:01

this time target the third span element by saying, nth-child(3). 10:06

And I"m going to change the color value to #164d67. 10:11

[BLANK_AUDIO] 10:19

And as you can see, this gives me a dark shade of blue. 10:21

Now there's also a handy jQuery plugin called Lettering.js that will give 10:25

you this type of down to the letter control without having to use any spans. 10:30

Now I'm only using three letters here so 10:34

it's okay but check it out in the teacher's notes of this workshop. 10:36

I've added a link to that jQuery plugin. 10:40

Right. So I'll save the style sheet. 10:42

And once I refresh, we're able to see the overlapping areas of our text. 10:45

Cool. 10:51

So next, 10:51

I'll need to define a blend mode that will blend these overlapping parts together. 10:52

Now, since we're not blending background colors this time, 10:57

we actually want to blend the element's text color. 11:00

The background-blend-mode property we used earlier will not work. 11:03

So, now, we'll need to use the mix-blend-mode property. 11:08

So as I mentioned earlier, the mix-blend-mode property blends the content 11:12

of any HTML or SVG element that's painted underneath. 11:17

Not just a background layer. 11:22

And it also accepts the same 16 blend mode values we talked about earlier. 11:23

So let's use that property. 11:28

So I'm gonna scroll down to the bottom of the style sheet. 11:29

And I'm gonna target these span elements inside the h1 with a descendant selector. 11:33

So we'll say, h1 span and 11:38

add the mix-blend-mode property. 11:42

And I'm gonna set the blend mode to multiply. 11:47

[BLANK_AUDIO] 11:50

So first let me scroll up and comment out the body background color so 11:52

we can really see how they multiply blend mode works against a white background. 11:57

So I'm going to select and comment out the entire background declaration. 12:02

And once I save and refresh our webpage, 12:08

we can see how the overlapping parts between the letters are clearly defined. 12:11

Notice how the multiplied blend mode darkens any of the overlapping areas. 12:17

So now I'll go back and reapply the main background image by uncommenting out 12:23

the background declaration. 12:28

And since our body background is quite dark, as you can see here, 12:30

the multiply blend mode now darkens the text color. 12:35

It's almost pure black and we can't see it. 12:39

So because of this, I am going to go back to the style sheet and change the span's 12:42

mix-blend-mode to screen. 12:47

So now when I save our style sheet and refresh the preview, 12:52

since the body background is now back to being a dark color, 12:57

the overlapping parts of the text are now lightened by the screen blend mode value. 13:00

So blend modes are a neat CSS effect you can use to enhance headlines, 13:06

icons or any part of a web site. 13:11

But you don't want to over use them. 13:14

Because too many blending effects can ruin the effect or 13:16

magic you're trying to achieve in your design. 13:19

So it's best to use it in a subtle way like on a site headers background image or 13:22

like in Bennett Feely's presidential candidate example we saw earlier. 13:28

And you can also take a look at the teacher's note for 13:32

other great examples of blend modes in use. 13:34

So the browser support for blend modes is looking pretty good. 13:37

Chrome, Safari and Firefox support both the background-blend-mode and 13:41

mix-blend-mode properties without any vendor prefixes. 13:45

Unfortunately, Internet Explorer does not support these advanced blend modes. 13:49

But the good news is that Modernizr has added feature detection for 13:55

CSS blend modes. 13:59

This way we're at least able to provide a fallback for IE browsers if we need to. 14:01

Now blend modes are an enhancement feature. 14:06

So if they're not supported by our browser, you should still make sure 14:09

that your site or content is still presentable or readable to users. 14:12

Being able to apply Photoshop like blending effects to HTML content 14:17

with CSS syntax gives us more power and flexibility when designing for the Web. 14:21

You see, graphic editing features that are negative to the browser brings us 14:26

closer to removing our reliance on graphic editing software and that's exciting. 14:31

So it's always great to experiment with and 14:36

use CSS features even before they're supported in every browser. 14:38

That's how we moved the web forward. 14:42

You need to sign up for Treehouse in order to download course files.

Sign up