Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get CSS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Manipulate Images Using CSS Filter and Blend Modes

2:24 CSS lesson by

Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, you can create powerful image effects using only code. This can drastically reduce the amount of time spent back and forth between designers and developers.

Here's more information about filter, blend-mode, and mix-blend-mode.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, you can create powerful image effects using only code. This can drastically reduce the amount of time spent back and forth between designers and developers.

Here's more information about filter, blend-mode, and mix-blend-mode.

Let's start out by adding image selector. Inside of it, we'll type "filter." I'll add a sepia function. I'll provide it a value of, let's say, 80 percent. Filter functions are very powerful when you chain them together.

Let's comment the sepia filter out and we'll set up another filter declaration. This time, I'll start with a contrast function and I'll give it a value of 175 percent. I'll add a space. Now, I'll include a saturate function. I'll give it a value of let's say 300 percent. Finally I'll add another space. I'll add a hue-rotate function. I'm going to give it 300 degrees.

Next, let's look at background images. I'll comment this image out and I'll create a new div with the class of bear. We'll set up a selector to target the bear class. I'll set up a background image. I'll just use this source that I had before.

I'll also add background color of, let's say, indigo. Need to add a few properties to get this div to show up. We can use the background blend mode property. I'm going to give it a value of exclusion.

Blend modes can even be used with other elements such as text. Inside of the bear class, I'll add a paragraph tag with some text. I'll change the bear class to center that text. Now, I'll add a selector for the text inside of the bear class. I'm just going to add a few text properties to make that text a little bigger. I'll add a color to this text. I'm going to say color of coral.

Now, I'll add another property called "mix blend mode." I'll give it a value of difference. Can also change this to something like "color dodge." Depending on what colors and what blend modes you choose, you can get some really, really cool combinations going.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?