Check out a free preview of the full CSS In-Depth, v2 course:
The "Shaders & Blend Modes" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

CSS Filters, which are also known as Shaders, allow using Photoshop-like effects on images with a single line of CSS, saving time and bytes. Other CSS effects include using blend modes to blend multiple background images.

Get Unlimited Access Now

Transcript from the "Shaders & Blend Modes" Lesson

[00:00:02]
>> Estelle Weyl: Okay, so another thing we can do with CSS is art direction. There is -webkit-filter and it actually works, I believe, not just on Chrome, but prefixed with -webkit on most browsers. So here, I can change the hue of this. I can change the blur. I can change the grayscale.

[00:00:25] And so you see -webkit, they're called shaders. It's a CSS filter effect, but they're called shaders. I said -webkit-filter:blur(5px) grayscale(.06) hue-rotate and there's other properties down here.
>> Estelle Weyl: I'm gonna reset it, cuz I really don't like it. Let's go with sepia.
>> Estelle Weyl: If you wanna do an old-school photo, you can do it right there in the browser.

[00:00:57] You can do all of your images have sepia, and when you hover over them, they get rid of their sepia. It's basically doing art without adding extra images on the web. So those are shaders.
>> Estelle Weyl: The next one is a background-blend-mode. So here I have an animated SVG heart as a background, just to show you what you shouldn't do online.

[00:01:22] You should not have an animated background, cuz this will get really tiresome really, really quickly. But you can do an SVG animation. I did grab the idea from someone, and it's credited in the SVG code. And you can take a look at the SVG code and actually learn how to do this type of animation.

[00:01:40] So what I did is I did color-dodge. So if I get rid of this, you'll see I have two backgrounds. I have a gray gradient that goes from black to white. Let's just make this visible. Shoot.
>> Estelle Weyl: I can't actually hit a return in this example, but maybe I can hit a backward space.

[00:02:04] Yep, okay, so I'm going to make this color-dodge again. And then I'm going to change this from black to white, to red to white. And so you saw the colors change, and then I'm gonna do blue. And then I'm gonna do transparent.
>> Estelle Weyl: Okay, so here you saw that I did color-dodge.

[00:02:32] What's nifty is, if I can go down, we have all these other options of luminosity, color, saturation, hue, exclusion, difference, soft-light, hard-light, color-burn, color-dodge, lighten, darken, overlay, screen, multiply, and normal. So let's try some of these.
>> Estelle Weyl: So I don't like multiply cuz it actually shows my background image on top.

[00:02:58] Let's try color-burn.
>> Estelle Weyl: That's cool. So this is not like I'm gonna teach you deep-dive how to do this. I just wanted to show you that background-blend-mode exists. And it's actually pretty decently supported.