Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Blend Modes!
You have completed CSS Blend Modes!
Preview
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.
Fork this workspace to follow along.
Quick Reference
Browser Support
Blend Mode Examples
- A Modern Look at Classic Blend Modes
- Potential Presidential Candidates - by Bennett Feely
- Test blend mode values
- CSS Blend Modes with Sass
Tools
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up