CSS Blending Modes

Key Takeaways

hey there and welcome to my channel my name is Kevin and if you don't already know this place is all about learning how to make the web and how to make it look good while we're add it in this week's video we're going to be looking at something really really cool which is CSS blending modes now if you already know about uh blending modes it doesn't mean you shouldn't stick around I'm going to be looking first at the basics of them so how you can mix an image with a background color and after that we're also going to be looking at how you can mix them with gradients and with multiple images or two images and a gradient and how you can put multiple blending modes and stack your blending modes as well so all of that is coming up now now before I jump into the Crux of this video I just want to apologize I'm a little bit late on this video I actually had another video planned something a lot bigger than this one recorded the whole thing and the audio was absolutely garbage it was just really strange what happened so uh I had to scrap it don't have time to get it out this week so I'm doing this little short video normally I'd want to balance out the short ones with the long ones and series and all of that but it's two quick ones back to back this time because of that so with that out of the way let's take a look at what CSS blending modes are and the first thing we're going to have to do is put in an image cuz they use images so the first thing I'm going to need to get this to work is just to put in a div in this case I'm not actually going to put any content in here just because I'm exploring the blending modes but of course you could have some content in here uh div class is equal to let's just call it background image we won't be very original with this one uh so I'll save that let's jump into my CSS and in my CSS I'm going to select my background image and do a few basic things uh so let's give it the background uh let's start actually with a height of 100 viewport height and a width of 100 viewport width just to make sure it's the full size of my viewport and then of course uh to get this to work whoops we need to put in a background image to start with so I'll do a background image uh URL and it's stepback images and super kid. JPEG and let's just see that load in oh it's took a big image uh background size will help with that background size of cover so it takes up the space there we go so I have uh my image in there and if you know how background images work you can also have a background color on there so if I put a background color let's come here and do a background color we'll start with red just for fun um now a background color I don't see it because my background image is on top so if I you know there's my red and if I add the image the background color disappears and the image is on top of it so that background color is still there the red is still there but my image is covering it and this can be really really useful um if ever the image doesn't load for some some reason the color will come in so if you have some white text on something and it's on top of a picture you might want to put a background color on there too just in case the image doesn't load at least there's a solid color there and people can still read the text um and in this case to get the blending modes to work you need to have both an image and a color so if you've used Photoshop at all you probably know what a blending mode is and a blending mode is pretty much taking my image and blending it with the color that's there they all work a little bit differently there's lots of fancy algorithms that are involved the best thing especially if you're not familiar with them is just to play around with it until you get the look that you're after um or you know do it in Photoshop first maybe it's easier just to see uh to get it to work it's a nice long one background blend mode so a long property to choose from and as you can see I do have a nice little choice of them there even though it's not actually sh oh there we go I can scroll down so I have a choice of all of those which is pretty good um some of them are more useful than others uh the the default is normal which means nothing will change it's just a normal mode uh I'm going to let's try multiply first multiply is a popular one it's going to darken the image screen is the opposite screen focuses on the lightest things so if something is lighter we'll see that and if it's uh dark it sort of disappears so screen and multiply are kind of the oppos opposite overlay focuses on neutrals um except it shouldn't be giving me that whatever we'll jump into darken so darken is a lot like multiply it's going to darken things lighten is a lot like screen it's going to lighten things color Dodge uh gives you some interesting results usually but doesn't want to work for me all of these H um then we also have things like saturation whoops saturation focuses on the saturation so it's a little bit of a weird one you probably won't use that too often uh color is a nice one CU you can use it not color uh color is a bit of a strange one too actually of course course and then luminosity and there you can sort of use that just to color your image um I do think we have a few other choices in here yeah there's stuff like exclusion um and let's just see in the list hard light whoops uh is you know you start getting into some of the weirder ones if you're familiar with Photoshop you'll know which ones you like Hue is a good one for coloring the picture too uh actually in this case it's giving us some crazy results so uh you know as I mentioned uh you're probably going to have certain ones that you want to use and I'm really curious why overlay didn't want to work before let's just try overlay again oh is it because we're focusing on the neutrals let me just try uh fire brick aha yeah it's because of the color of the red um and this is where depending on the color you chose you're going to get different results so let's just switch this over to Steel blue um so now overlay is working properly it'll just do jump through a few of them darken will look like that lighten will look like that you'll get different results depending on what your background color is uh so that's why I suggest playing around with it a little bit to see exactly what you're going to get because depending on the colors in the image and the colors your background color that you're using you will get some different results every single time now there's some other really cool things you can also do with these it doesn't stop there so if I take off my background color let's just say this is my background image um you can actually blend in some gradients so if I do a comma and do a linear gradient and I say steel blue to uh fire brick I get my gradient and the blend mode so um get the overlay blend mode with my gradient uh I think that's really cool and uh if I'm doing this where I have and I'm just separating these with a comma so it's actually putting the two of them on my as a background uh and what I can do if I'm doing this if I can bring in a linear gradient why can't I just bring in a second image and I can uh so I can do another URL again comma separated IMG slash oops IMG SLS sidewalk. jpig and you can see I'm blending two images together and in this case it doesn't look so good uh I don't know if any of these will actually look good um but you can see I can actually blend the two images together and get this weird sort of style that I'm getting right now and depending on the blending mode you get you will get different results um so I find that really cool and you know why not uh let's just pull in a linear gradient on top of that red yellow and now I'm blending all three of them together so so you know it's this is probably a little bit of Overkill uh even just blending two images together can be kind of awkward I'd probably do it more with a background and then a linear gradient uh rather than two images or two images and a gradient but it's just say you can keep going going and going and we're going going going so why not you can actually stack up some blending modes at the same time so if you do have multiple images you can set up multiple blending modes so I have an overlay for the first one and then my second one can be set to lighten uh and again that's going to completely change how these look so uh let's just do a screen on the first one and a multiply on the second one and uh really fun thing to do again if I was doing this without just a solid color I probably wouldn't have two images I'd probably stick with one image uh and then do some sort of uh linear gradient with it um just uh for my personal use the most popular ones and this is from my days in Photoshop uh but the ones I've used the most are generally screen which makes blacks disappear and makes white show up uh screen multiply which is the opposite again uh so this is going to focus more on the darks keeps the darks get hides the whites and uh overlay which focuses on the neutrals it's sort of in between the two of them um so it focuses more on neutral colors and not on uh the whites or the blacks it hides 50% Grays or 50% um yeah hides 50% Grace so just to show you one thing that could be fun uh let's actually get rid of this linear gradient you can also stack the same image just really really fast uh since I like doing this in Photoshop sometimes uh if you're stacking the same image on top of itself you can also get different results uh so let's just take this off there's the default uh so if I do multiply everything will get darker if I do an overlay uh let's start with a screen actually everything will get lighter and if I go with an overlay it's just going to increase the contrast of the whole image um now you know this might be a cool way to increase the contrast without having to go into Photoshop and and change it but do be aware this isn't fully supported on every single browser uh so according to caniuse.com Chrome and Firefox are good to go you can do whatever you want uh Opera also supports it as of the current version uh I e and Edge both have no support whatsoever for it big surprise I guess uh but they will have zero support for it whatsoever and Safari for some reason supports it um but it only supports it for everything it it doesn't work for Hue saturation color or Luminosity uh but all the other blending modes do work just not Hue saturation color and luminosity and uh then there's also the mobile where it's a bit more hit and miss iOS apparently supports it the exact same way Safari does which makes sense uh oper mini just doesn't um Android browser and Chrome for Android both are supposed to support it so you can get away with using them but just be careful it might not always work so don't rely on it unless you're you know if you're going crazy using flexbox and you're really uh you know counting on the future and stuff like that that's fine I love playing with these things just know that it's possible that it's uh not going to work and that's it for CSS blending modes I hope you like this video again I apologies for it being a day late thanks so much for watching the video if you haven't already please subscribe to my channel you get a new video every Wednesday possibly Thursday and uh if you like this video hit the like button if you have any questions or comments leave them down below please let me know let me know you're here let me know you're watching say hi and until the next video have a great day guys