 A lot of time people have trouble getting text to look at on top of a background image so they throw a background color on there. They don't like how that looks and I don't blame them. This doesn't look so good so then you come in with an opacity change to play with the opacity of the background but just washes things out. It can look okay but it never looks fantastic. Well there's better ways of doing things and we can do that with mixed blend mode so instead of getting that washed out look you can get this type of look instead which I think looks pretty cool or you can even fancy it up bring in some gradients do other stuff like that and get some really interesting effects and things going on maybe not the perfect use case with this but I'm sure you can come up with some awesome stuff along the way so we're going to be looking at how we can do this type of effect in this video. Hello my friend and friends and welcome back to the channel if you're new here my name is Kevin and here at my channel it's all about just falling in love with the wonders that are CSS and if not falling in love with it at least being a little bit less frustrated with it along the way and we can do that sometimes by learning the foundation and the fundamental skills of it or other times we can do it by just finding ways to make things look better and that's a little bit of what this video is about now when I have looked at something similar to this in the past which was a background blend mode but in this video we're going to be looking at mixed blend mode which instead of mixing multiple backgrounds on the same element we're taking different elements and blending them together you can get some really cool effects but you can also run into a lot of problems along the way with it and it's a little bit interesting in how it works so we're going to start off by looking just a quick overview of some of the different groupings and general things with it and then we'll dive into an actual use case for it like we saw at the beginning of the video with that we're going to look at some of the issues that can come up with mixed blend mode and also how you can prevent those issues from getting in your way so let's go and dive into the code and take a look all righty so let's jump into the CSS and get started and I am in code pen right now so the link to this one and the next one we're going to be working on are just down below now I'm not going to run through every possible mixed blend mode that's available but one thing that's really important is the way things are organized in the DOM so here I do have my mixed blend mode div which is if we go and look this is where this background image is or it's actually well it's an image but it's a texture or pattern so I have that so even here if I turn off the color you can see that I still keep the background image so we have a transparent image then we have that so that's my background and then I have these divs in front of it that have a color on them and this is where things get interesting so here if I go and mix blend mode and the syntax is really simple mixed blend mode and then you choose the mode that you want right there and this one is multiply and you can see that it's gotten rid of all the whites and it's keeping the darker pixels you'll also notice that it's taking the text that's in here this would even be if we wrap that in a paragraph here I think I can just drag and drop it so even if that's in a paragraph or not in a paragraph it doesn't matter it's everything that is in here is going to be affected by that blend mode so the text is affected the background is affected and again it's taking the darker of the available pixels and these are like sort of the general groupings that I'm going to run through because the next one is screens let's go down to screen there we go bump the other one out of the way and we can open up my screen right here and screen is the opposite so multiply is going to pick the darker pixels screen is going to take the lighter pixels and use whichever ones are lighter and it just boosts brightness in general so you can see we get this type of effect so if we compare multiply and screen they're pretty much opposites here the white text is disappeared here the white text is stayed we can see much more the x and o is coming through on that one so there's just two basic ones that we can look at overlay is the third one that you're going to see a lot of because what overlay does is it sort of plays with contrast so while multiplies darker screen is dealing with white pixels more keeping more of the white pixels overlay is dealing with neutral grays and it just in general boosts contrast and then last but not least is sort of one of the stranger ones which is difference and we're going to open up photoshop in a second to understand difference but what difference tries to do is illustrate where things are different so i think the easiest way and this is i always use this in photoshop to make sure things were properly aligned so here is me i'm very happy you're here right now and photoshop or anything that has blending modes is always an easy thing to play with because you can sort of just go crazy and see how things blend together so just really fast here like this is all this grouping here is all the ones that deal with lighter pixels or it keeps the the darker pixels so the lighter pixels are being removed so that white background is just disappearing the opposite in this grouping this is my contrast one and then here's sort of the weird stuff down at the bottom but yeah if i go in normal and i hit command j so i have two of the same layer here and i go over to difference where is it you'll notice that we don't actually see anything because there is no difference between these two layers but if i go and i move that layer a little bit now what it's doing is it's highlighting the differences and it does it in a really creepy way by basically inverting colors and doing all sorts of crazy stuff but you can see as soon as it gets there you can see it if there's so it's we use difference to highlight differences and that might seem really weird here i looked at a really awesome use case that was by annatudor in a previous video which i'd really recommend you check out it's just a really cool thing you can see it on the screen now but yeah i'll include the link to that pen down below as well and that's what inspired me to make this video we're going to dive a little bit deeper into it so there's the basics of them and like the different ways that they generally work so again the overlay the screen and multiply are probably the ones you'll find yourself using the most but there are so many to choose from i've linked the mdm link down below as well but you're here because you want to see how to use it on a layout instead of just some random example like that so here's the layout that we're going to work on now again this is in code pen it's linked down below if you want to play around with it and what i want to do is give this area a background and the most common thing i see people do is they come in and they say background and then of course we come in with our background color you set it and you go okay that doesn't look terrible and here the width is just 40 percent i'm using flexbox to stretch it you can dive into the code more if you want to see how i made the layout but i set a background you know it doesn't look fantastic or you have text that's hard to read so you need to put a background on it and then that doesn't quite work so this is where we can come in with our mix blend mode you okay haven't told me about mix blend mode i'm going to try mix blend mode out and overlay looked cool when he did his demo i'm going to try that and whoa what i can't read my text now or it's very hard to read my text now or let's just try screen for fun and see what happens there and oh my goodness it's getting worse and multiply would be better um but still it's not going to be perfect uh because the text is blending in with the background too and this is one of the issues with it so it doesn't mean you have to set things up in a pretty specific way uh often to be able to take advantage of this especially if text is involved if you do check out the the one i mentioned from an attutor there she's using it in a creative way with text to pull off a cool effect but uh yeah what i'm actually going to do is remove these from here let's just copy this background color so we don't lose it i'm going to remove those from there and i'm going to come down and we're going to do my favorite thing in the world which is a pseudo element and we'll use an after for it if you don't know about pseudo elements check out the link that's popping up or the card that's popping up up there it's linked down in the description too um i have a very in-depth video on pseudo elements because i love them and they're just they're awesome um so with that i have content which you need on a pseudo element i'm going to come here and do a position of relative relative because on my intro i want to do a position of absolute and i don't want it to i want to position it relative to my my and i want the the containing block to be my hero intro right there um so let's give it that background color so we can see it in a second and then normally you do top bottom left right now we can do an inset now on my video that i talked about inset uh which if you haven't seen it it's a popping up there or in the description once again um but the i i looked at when i showed it people asked how often you set a zero to your top bottom left or right or you could do all the same value so it's you know you do 1m and again you could this is a shorthand it's top bottom left right shorthand it's just like margins you can do all four separately with with different values as well um but people ask me like how often are you setting all four with pseudo elements quite often i'm doing this now you'll go kevin there's a problem it's in front of everything we need to move it backwards you're right so how can we do that well we have a position so with position and actually let's just move this background here i like keeping all my position stuff together uh so we're going to throw a z index on here uh negative one and we'll put the background back on um but the problem is when i do the negative one z index what's happening is it's actually going behind the hero itself it's going super far back so there are a few different ways that we can solve this but i'm going to do it um by doing it on the hero itself and not on the hero intro and i'll explain why once we set up our blend modes and everything but this could be an issue that you run into if you're using it so yeah i'm going to set it up here on the hero itself what's really important here is i'm setting it up where the background image is this is the key so if it's an image or if it's two colors or a gradient in a color you have to if you do need to play with stacking contexts and the ordering of things you want the one that has like the control of your stacking context to be the one with the background image here and what i'm going to use is there's two different ways i could do a position of relative and then i could throw a z index on there so z index of one because what this is doing is it's creating a new stacking context and by creating a new stacking context when you have stacking contexts the children inside can't escape that stacking context anymore so the after here it can't escape my hero and go behind it anymore it's negative one but it's negative one within that capsule so this is creating a new stacking context now if you do look up more on mix blend mode another thing that you'll see a lot is isolation isolate and this is the same thing with one line of code isolation isolate makes a new stacking context so in this case i'm going to use it here and it prevents my pseudo element from escaping outside of the hero which is exactly what i want and now i can come in and do my mix blend mode and i just want to compare it to one thing that i see a lot of people use this type of thing for so maybe you have text on an image and it's hard to read it so you throw a background on it and then it doesn't look great so you play with the opacity i see this all the time it doesn't look terrible but let's just compare that to if i do a mix blend mode and let's start with multi multiply and so don't you find like look at the richness that comes out of that and then if we turn off the multiply and we put the opacity back on it just the opacity just fades it out a little bit um whereas with the multiply i can keep those dark rich colors of like the dark green the text becomes much easier to read and i just love it so much more and as you saw there it didn't actually look bad when you combine the two of them together as well um you get more of the text you know more of the actual image in but you still get a little bit more happening here so you know you can play around with the two of them and you can get a really nice looking design but i am focused on readability so i do think the darker the background the better uh that is why i chose multiply because multiply will get rid of lighter pixels it keeps darker pixels so because it's keeping my darker pixels it's the perfect choice here if i had dark text on a light background maybe screen would be better because screen's going to keep the lighter pixels it's going to wash things out and then the dark text on top would be able to to be much more readable and easier to see you can run into issues and some things that also really depends on the colors or gradients or whatever you're using and you're mixing together so you do need to experiment a little bit uh if you are placing text involved like we are here overlay is a hard one to work with because it boosts contrast so lights get lighter darks get darker and that means that it's you know in the light areas it's hard to work with but overlay it has really nice effects you just be careful and just focus on making sure that things are still really easy to read that should be the goal but you want it to look good too right so we can come in with the multiply right there um now i did mention that i was putting my isolation isolate here on the hero so just really quickly the reason i did that and i didn't do it here where we have the position relative is if i did that it means that this is my stacking context and this would be the same if i did a zindex on the hero intro here um because what that's doing is it's creating this my hero intro is becoming its own stacking context so its living little bubble and that means things can't escape outside of my hero intro so this background has nothing this this green background now has nothing to blend with because it's not escaping out it's not seeing the other things on the page so that's why if you do need to use the isolation isolate or just create a stacking context however you want to um you do it with the items that you want to so like the base layer that you want to be blend blending together with so here i have my base layer that's setting that and then i come with this here creates the new stacking context and that prevents this from disappearing behind everything else and it's all working out pretty nicely and one interesting thing with mix blend mode is there is another type of blending mode which is background blend mode where you can actually set multiple backgrounds on one element and blend them together as well if you're interested in that you want to check it out here is the video where you can dive into that and with that a really big thank you to my supporters of awesome over on patreon zack and randy as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome