 Did you know you can take a very simple gradient like this one and just add a color stop to both of them the same color stop for both and it actually creates two solid bars. We can make this more interesting by turning it sideways and getting the bars to be vertical. The fun thing also is we can add a background size to that and make some stripes like this. We can actually do this with a second gradient as well on the same background image declaration. They're just going to be comma separated. The important thing with this is we're using a little bit of transparency here and will come and also set the same background size for it. And now we can create this kind of interesting pattern that we have right there. Hi there, my friend and friends. Thank you so much for coming to join me yet again. And if you're new here, my name is Kevin. And here at my channel, I help you fall madly deeply in love with CSS. And if I can't get you to fall in love with it, I'm hoping to at least help you be a little bit less frustrated by it. And I think one really cool way to do that is to have some fun with gradients because well, we can often use gradients for simple things. Just adding a little touch to something or a little subtle, you know, change of color or sometimes something that's going to add a lot of spice with a big, aggressive gradient. They do a lot more than that, as we just saw. And there's more than what we just looked at that we can do from creating zigzag patterns to waves and a whole bunch more. And they're by calling them gradients. The name sort of hides the fact that they can do a lot of these really awesome things. So with what we just looked at, it was a little bit of a teaser of the things to come. So let's jump back into VS code here and get started with the other stuff that we can create. And this is, as I said, just one and what we're going to do is move down. All I've done for this is set up some sections and we're going to work on each one. So we can scroll down, get rid of that one and come to the section, too, which is not a class and start working on that. So we have a color that can come and act as our background. And often when we're doing these effects, we're going to want to use some transparency along the way. So setting sort of a base background color can be a really good starting point to sort of set the stage for things to come. Now, for this one, what we're going to be doing is looking at a zigzag pattern. So let's come and first set up the first gradient that we're going to put on here. So of course, we're going to want a background image. And because I have done this with a background color shorthand here, I don't want to, or longhand, I should say, I don't want to use the background shorthand or would overwrite the longhand that's there. So I'm going to do the entire background image. Of course, you can do these the other way around and then not worry about it. And there are other approaches to setting these up that can sometimes be a bit more concise. But I just find this way is a little bit more clear. So if you're new to the patterns, hopefully it helps you understand exactly how they're working for the zigzag. The first thing we're going to do is have a transparent that's 50 percent and then have an actual color that's the other 50 percent here. And you can see here, this is just that background color that I had here originally. And then what I'm going to do is we'll come here and we're going to say negative 45 degrees to set it so it's actually doing sideways like that. Instead of how we have the other one creating bars, we're creating triangles, I guess. And that made me think of something that could have been useful a few days ago, but that's okay. And just really fast, I am breaking these down over multiple lines just to make it a little bit easier for readability. During the tutorial here, because I don't like word wrap and stuff. And if not, we're side scrolling, which is terrible for demos and everything. But you can write this all along one line, no problem. Now, the way I've set this up at the moment, it's actually doing, you know, we're splitting it right in half, but we could actually change these points here to be a 75 percent and a 75 percent. And it's going to push that triangle up a little bit because we're basically saying, you know, we have the negative 45 degrees on there. So we're turning it around. It's going 75 percent transparent. And then the last little bit here is going to be filled in with that color. And then what I'm going to do is actually copy this entire gradient that we have here. And we're going to put it in, including the comma after there four more times. So we have four gradients going on. And I'm just going to rotate each one around a little bit. And you can see now because we've rotated it differently, we're getting the triangle up there. And then we want a negative 135 and then a positive 135. And the order of these really doesn't matter. But basically it puts a triangle in each corner or gives us sort of this interesting pattern that we have right there. And it's just basically about having the four gradients creating a triangle on each side. Now, as we saw with that first one at the beginning, if we add in a background size on this background size, I'm just going to say four rem, four rem. It's already going to create sort of an interesting checkerboard pattern right here. And the reason I'm doing four rem, four rem is it's doing, if I just, that's kind of interesting too, I guess, but we want to repeat it on both axes. And we could do something even kind of weirder if I put a comma here, two rem, two rem, let's say. Look at that, that's kind of cool. But basically this is going to be used for all of them until I actually declare something else. And if I declare a second one, I think this one is actually getting used for, you know, this would be for my first one here. And then we're repeating that one for all the other ones. So you could have different background sizes for all of them. But for a zigzag, we're going to stick with this. Now in the previous one, we looked at how we can do background size differently. But one thing we didn't use is setting up background positions. So let's go background position next. And we can move these around a little bit, which is kind of interesting. So because I used four rem for the size, I'm going to move the first one over by two rem, and then I'm going to say zero. And then I'm going to move the next one over by the same amount. And then for the other ones, we're just going to do a zero, zero, zero, zero to keep them in the same spot. And look at that, we get a zigzag pattern. Now, if I just do one of them, you can actually, you can get some interesting stuff coming in here, obviously, by playing around with these numbers. But when we're moving them around, you're just taking those triangles that we created and you're sort of shifting them over. So I want to take those first two that were set up, and we're effectively just shoving them over a little bit. And it creates this kind of cool pattern that works really well. And really, the important thing for the zigzag is this, the offset here is half of whatever your background size is. So if I had, you know, if I needed a bigger zigzag, we could put that up and I could increase this to be half. And then you get the same thing. This could be a really good use case for custom properties. So you're just updating one using a couple of calyx and everything just works really well. And of course, you could get really funky and muck around and get sort of these interesting things going on with different stuff just by playing around with the numbers and seeing the types of things that you can create along the way as well in, you know, changing your zigzags, playing around with stuff by updating these values and seeing what happens. And just before we move on to the next one, I just want to say really quickly that I had to do a lot of learning to really figure out how this was working. And so there's a lot of sort of research and articles and stuff. So I have linked down below to a lot of the resources I used in learning how to set these up. I do want to give full credit to the resources I did because I didn't figure out all of this on my own. So if you'd rather do reading and, you know, you prefer blog posts over videos, those are all linked in the description. And with that out of the way, let's get on over to our pluses. So we're going to move down to this section three and we can scroll this down to this next part as well right here. And we can get started on this. So here again, I'm just putting a base background color, whatever color you would want could work really, you know, should work perfectly fine. And we're going to jump in once again, of course, we're going to need a background image. So we can throw that in there. As you guessed, we're going to have a gradient on here. So for this first gradient here, I'm doing the same trick that we just looked at where before we were doing 50%, but now I'm only doing 0.5 REM. So we're moving down 0.5 REM and then we just have transparent for the rest of it like that. And then what we're going to do is we're going to put a comma and bring in the exact same gradient. But the difference with this one is we'll rotate it 90 degrees and what that's going to do is if I don't break my gradient there, we have fixed it. So in this second one, you can see that it's just turned 90 degrees for being the exact same thing, but from the left to the right instead of from up to down. And now the fun part starts with how we can repeat this. And as you might guess, the trick for this is the background size. And up until now, we're only using linear gradients, but we're going to get into other sorts of gradients through this as well. And through this, we've so far, we've only looked at linear gradients. But we will be looking at radial as well as conic gradients because both can be super useful at creating some interesting stuff. And we're going to sort of step our game up a little bit as we go through these. So for this one, I'm going to come in with a 5RAM and 5RAM value just to give myself a grid like this. And maybe that's already the thing that you want to set up. And it could be interesting. You could play around with that, create almost like a grid paper grid effect with this type of thing as well. So yeah, there we go. That already looks kind of cool. But now we can create some pluses with this. And this is where things get a little bit strange in a sense on how we're going to do this. And it requires some creativity in thinking about how we can actually create these types of things by creating patterns and overlaying other patterns and stuff. So the first step for this is bringing in a radial gradient. And I've made it really bright and sort of in our faces. We can understand what's happening right now. We're going to change the colors on this to make it all work. So I'm doing a radial gradient. I'm saying it's a circle. Now, because we have a background size, it's declared and it's actually the same, you know, it's five and five. So they're the same. These are always going to stay perfect circles. But if I change this to say five and one, where it's maybe we'll do a five and three, you can see these are still perfect circles, even though my squares are now rectangles behind it. If we didn't have the circle in there, they would also smush. So just having circle ensures that your radial gradient won't become some awkward sort of oval or something like that. But basically we're saying that we have a circle. It's transparent in the middle. So we have transparent for one rem. And then after that one rem, we're just going to a solid color. So we're just creating this circle that's right there. Now, what I actually want to do is move these circles to somewhere else. So what we're going to say is background position once again. And for the positioning of this one, it's a little bit interesting because we want to move it over. And basically I want to line it up. So it's always around this part where they intersect. So to be able to do that, I want to take half the size of my background size here, which would be 2.5. But I also want to take half the size of this because if not, it's going to be off by a little bit. So we need half the size of that, half the size of that. Again, custom properties using calcs could make this just much more adaptable. But we're going to stick with solid numbers for this one just to make it a little bit easier for everyone to read. So on that, we need a 2.75 rem and a 2.75 rem. And I'm just going to do 00 for the other ones to ensure that my other lines don't actually move. And now you can see that those circles are perfectly lined up where these are crossing over. And you might be saying, Kevin, I don't understand why we're doing all of this. But if I take my background color now and I replace this trend, the bright pink with my background, then I get some pluses. Now, let's say you don't like that they're lining up here along the edge like this or along the top. You'd rather them start a little bit offset. We could update these values here. So let's just say we'll grab both of these at the same time. We'll say we do a 2.5 rem and a 2.5 rem offset. If you do this though, you have to add that number to what we have here. So that should be a 5.25 then. And by doing that, we're just sort of offsetting everything a little bit. It happens to work perfectly with my screen size right now that it's fitting within here, but that is a little bit of luck just because it's a background image that's repeating. So of course, sometimes it will be cut off somewhere along the way. Maybe you could use viewport units for everything to try and get it to always sort of scale around and stuff. It could be worth the effort. It depends on the type of thing you're creating. And of course, right now, I'm also using really bright colors. You can do this as a really subtle background effect. You can keep these much closer together with smaller background sizes and stuff. So it's just more of a subtle pattern. But to really see what's going on, I am using bright colors for these. Now, just like in the other ones where we played around the background position and I got some really interesting effects, you of course could continue to play around with that or you could come in and play around with your background size. They're all the same right now. But I could come in and actually say that that first one has a smaller background size on it. One ram, one ram. And then we have the other ones and you start coming into some really interesting or creative things. So for example, if we did two ram, two ram for the circles and then one ram, one ram for the other ones. And so you get sort of these fun creative patterns just by mucking around either with the background size or the background position. And if you're trying to come up with these, having the overlaying layers as transparent is always sort of interesting or not interesting, useful. So like not using solid colors just so you can sort of see how things are moving can be really helpful. And just really importantly, my radial gradient did come first. I don't think I mentioned this at the beginning. But if we're layering things on top of each other, the first one is always the one that's like closest to the viewer. So it's overlaying sort of, you know, we're going deeper and deeper as we go. So just this is the one that will be covering this which will be covering that one. Always important to remember. But yeah, I think that's kind of fun. I'm going to put this back to the pluses for now just because that was sort of the purpose of that one. But you can see same idea, completely different result. And now we can move down to the next one which is our section for right here. So for this one, I'm going to use a radial gradient. And again, I'm putting circle here just to make sure that it doesn't get weird oval shapes on it. We're doing our transparent in the middle. So one ram transparent. And then we have the rest of it filling up with this color right there. So we could actually do this by having multiple radial gradients like we saw before where we have multiple gradients and to build like concentric rings if we wanted to but we could do it all with one. So here if I come and I say I want like this color, the light color here to only be say two ram thick. What I could do is take this same color that we have right here and on that one we could say that this is going up to three ram because the difference between one and there is two. And then let's just come in. I'm just going to use steel blue as an example color. And we're going to say that steel blue starts at three. So we get transparent up to one. Then starting at one all the way up to three, we have the light color we have here. And then we get the steel blue and I can continue that out. I could say steel blue goes up to five ram and then we have transparent that starts at five ram. And we get that type of thing going on which is kind of interesting. We could do a little bit more with this of course but we can get this already to be a little bit more interesting if we come in and we add like usual a background size. So if I start this and this is going to be kind of weird if I start this with a 10 ram 10 ram and I just get that repeating itself as you'd sort of expect. And let's say I went up to 20 and that would sort of work as well but maybe going well, okay, why were they stuck together before and now they're not? And it's sort of how I'd set all of this up basically and because I'm using ram units here so I'm using a fixed number rather than a percentage or a viewport unit or something. It's not worrying about, it's a saying like we're doing one, then we have plus two. So that's a three total. Then we're going all the way to five. So if we're going all the way to five, well that means we have a 10 total. So going all the way up to five with a 10 total means if I have 10 as my background size they repeat themselves like this. Where this gets kind of more interesting is let's just drop one of these numbers to a smaller value and maybe this one could be a three and it probably wasn't what you were expecting right there. But it gets kind of you know and I can pull these closer together. Of course, whoops, that would should have been a three to get dots like that because I'm only seeing the transparent part to that and we're not seeing the steel blue coming out of it. Now I've updated this really quickly just doing going up to the 1.5 here and you can see we're sort of getting this ring pattern. So I'm just doing transparent to this color and actually let's take this background size off. So basically I just get this here right. So we have transparent for one rem then we have the 0.5 rem here and then it goes back to transparent. So with a background size on there using three because it's double this we get these rings like this. Where this is kind of interesting though is this circle. I can actually move where the circle is within sort of this space that we have here. So I can say and actually know what we'll do we'll turn off the background size because this will make it more obvious. I'm going to say at 100% 50% and when I do that so it's moving it all the way over to here where we only see that half of it. Kind of interesting right and I can do this as a negative 50%. So now if I bring my background size back in I'm going to get that repeating itself over and over and over again. And so here just really fast if I update that we go back to having the circles. The default is 50 50. So what I'm saying is we're moving all the way over and we're starting at like 100% of the way over to the right and so the gradient is sort of coming out toward the left by doing it this way. And what we can do with that is come in and I'm going to copy this gradient that we have right here and I'm going to put my comma. Whoops. And we'll put the comma there and paste this back in. I don't have formatting on so let's just do that really fast. But what I want to do for this one is started at the zero side instead and it goes back to the circles. So you might be wondering well Kevin what's the point of this we had this already. Now right now the three and three gives us this but what I actually want to do is move things around a little bit. So I'm going to change this three here to a five and that's going to give us more space because we have extra space up and down basically. And the reason I want to do that is because I want to move one of these. So what I'm going to do actually just so we can see what I'm moving let's change this color a little bit from a we'll just make that an F just so we can see like one side their opposites and what I want to do is slide the pink one down. So if I want to slide the pink one down we're going to say background position. The first one can stay at zero zero and then the next one I want to move it down. This is my X. This is my Y. So I want to move my let's just try a negative one and it's not going to be quite enough but you can see it is moved or it could be positive one to move down and we need to move it down enough to line up with this next one. And for that it just means we're going to move it by 2.5 and look at that they line up and then of course if the colors were the same right then we get it looking like a wavy pattern which is really really cool and if I change my background size this way we can just add like more and more space between them basically to play around with that of course play with your sizes different things like that which would involve updating background positions and everything so percentages for this could also make it a little bit more obvious or using custom properties once again the important thing here is the background position is based on the background size that I'm using here and the background size that I'm using here is based on the size of the actual circles that we're creating we were doing them they're three big each but then we have the 0.5 RM so it's actually two and a half big each really to get them to line up properly so the two and a half plus you know plus two and a half is five so that happens to work because you might think that it would have to be six but then they can never quite reach each other though that does mean you can do kind of cool things like this as well and then maybe play around with different settings to get interesting stuff going on once again but I'm going to bring that back to just being some waves like we had originally maybe I will space though it a little more because it's a little bit busy so something like that could be interesting and just before we do jump onto the next one I want to say that all of these could actually be animated we have app property now which really opens up the doors to doing stuff like that so I don't want to jump into that in this video but I just want to say like not only can we do creative patterns we can do creative animated patterns as well which is really really interesting but this is sort of the building blocks we'd want to build upon to create them and now let's move on to our last one so we can scroll down to this section right here and scroll on down in our CSS and get started so for this one once again background image and we can actually we're going to use a conic gradient that looks like this and a lot of the other stuff we've done so far you could actually do with conic gradients conic gradients are for pattern creation are absolutely crazy but people generally aren't as familiar with them so I wanted to sort of look at this things people are more familiar with to start with and basically conic gradient means start at that color here and spin around until you get to the other one in this case I'm using transparent but if I red or whatever it spins around and gets eventually to the red and then you get this big harsh line and yeah they're kind of cool I have a video where I went into a lot of depth with them so I'll put a card in case you've never played with them before but we can do some crazy stuff with gradients with them so the first thing we can do is just like everything else we've been doing so far you can change sort of the positioning of it but because it's dealing with the way it spins around something you can do it in degrees so I'm going to say 60 degrees and 60 degrees here and we're doing the same thing we did before we're starting at the original point we're going 60 degrees with this color and then we're doing transparent the rest of the way around so it gives us this sort of triangle thing like this which is sort of what we want to start with now like other gradients as well you can say like starting from top left or give it the positions like we saw the circle we gave it a starting point we can do that here we can do a from and I'm about 150 degrees and that's going to give us a triangle right on the bottom like that and basically it's just if we take off these 60 degrees that we have right here take that off take that off it's just moving where this first line is we're spinning that first line all the way down to 150 right so if I change this to 100 we're just going to sort of spin less and so it's just where that line starts from we have the 60 degrees in there so from we're adding from 150 adding 60 degrees and it gives us this triangle now another interesting thing with this just like we saw with the circle before where we're doing we use the at I can actually use the at to move where this middle point is rather than you know so we spun around but where should this middle be so the default is 50% but then we can also move around so I can say 30% and you can see it moves up or I can make this 70% and it's going to move down so I'm going to put it back up to 30% for now just so we have a bit of a bigger triangle and guess what just like before we can come in with our background size and I can come in with a number and it gives us this which is kind of cool this is sort of if you had transparency set with a background you had this like right at the top of your thing you know you can give yourself one of these types of shapes along the top of an element if you needed to in a very simple way but of course then I could come in with another three rim and then we get triangle patterns there we go so you know it's kind of weird that something that spins around like that can create a triangle pattern like this but there we are I think it looks pretty good and you can play around with your numbers and your spacing and everything as usual to play around with how the triangles look now what we can do here once again and as usual we can make this a bit more interesting by coming in with a second conic gradient or other gradients I guess would work as well and let's change the color on this one and so now I'm coming with this really bright green color right there and they're overlapping each other but of course then I can rotate this one around to be the other side and now it's on top going downwards but we want to sort of what I want to do is sort of position it a little bit differently so this number say what's like really tiny and basically they're both meeting at the 30% point they're both meeting like right in the middle right there but we can take this number and I could make it a bit bigger so it's going much further down and this one is on top because of where it is maybe we'll do 60 on this one actually just make it a little bit tinier than the other one and now what I could do is come in with my background position and I could offset them a little bit which makes things a little bit more interesting so my background position here the first one I guess we could leave it where it is is 00 and then we can move this next one over by a 1.5 rem and a 0 and in doing that we get this coming in there and that's happening because we've moved over half of the total distance so it's giving us sort of this type of thing going on but what I could also do is I could move up and down so I could do a 0.5 rem here and I could move it let's do a negative 0.5 rem and look at that we sort of get these bigger triangles and smaller triangles all interlocking with each other and I don't know what happened there there we go so we're sort of just shoving it up a little bit so we get the space that's on top of this as well because these blue ones have been moved and offset a little bit there and of course you know playing around with this number is going to change the overall effect of it and you can come up with all sorts of different things but the 0.5 with the sizes that I have used here work really well and of course you could come in and play with these numbers as well and come up with different sorts of patterns and all sorts of interesting things it's crazy the types of stuff you can do just by mucking around and playing with one of the values along the way for background size and background position on these to create really interesting stuff and what's really cool with this is now that we have app property all of these can also be animated as well so there's really exciting things there I don't want to go into it in this video but something that I might look at in the future and as I just said a bit earlier if you're not familiar with conic gradients I do have a video where I go in-depth on them so that video is right here for your viewing pleasure and with that I would like to thank my neighbors of awesome Michael, Simon, Tim and Johnny 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