 The web is made of boxes, and boxes are bland, boring, and they all look the same. We can spice things up by bringing in some angles, shapes, and waves, like these, which make things a heck of a lot more interesting. So in this tutorial, we'll see how we can take something with very typical boring, squared-off sections and turn it into something spicy by using a few different CSS techniques, and in setting out to make this, I did have a few different goals in mind as well. First, all of these had to work with gradient backgrounds, and that's just because I wanted to make sure that it could work with anything that we threw at it. Second, each one had to be responsive, as I've seen some things, especially with the angled backgrounds, that as they shrink, the angle keeps changing and growing, and it just becomes really ugly when it gets too, you know, when the angle is too aggressive. So I wanted to make sure that no matter what we did screen size-wise, they always remained consistent. My third goal was to make sure all of them are super easy to customize and to maintain. So we'll see some fun CSS methods to help on that front. And the last thing was I wanted to make sure everything was done with CSS only. There are some good ways you can do this simply by throwing an SVG into your HTML, but I wanted to be able just to throw a class onto a header, a section, a foot or whatever it is, and just have the effect work. And that sort of circles back to the third thing I was talking about, about things being easy to maintain, because I don't want to have to remember somewhere that I might need a certain SVG or to have to make changes to an SVG to make things work. I want to make sure everything, I throw a class in there, it works. If I need to customize it, it's very easy to do. And just before we dive in, if you're new here, my name is Kevin, and I'm here to help you fall in love with CSS. So fire up your code editor and let's have some fun. So I am starting with an empty folder here in VS Code. I've created a folder, but I have nothing inside of this yet. If you'd like to jump ahead to specific things, I have included timestamps down below so you can navigate to where you would like to be. And the very first thing I'm going to do is in VS Code, I'm going to create a new file. And that file, I'm going to come and I'm going to call it index. .html. And while we're here, we might as well also make a new file for the CSS, which would be style.css. And we have two blank files now that we can work from. Now inside my index.html file, I'm going to come right here at the beginning, and I'm going to put an exclamation point, and I'm going to hit tab, and that brings in this starter template that we can work from. And if you're using a different editor and it might not be pre-installed, but you should be able to get it as an extension. And here in the title, let's give it something a little bit more interesting. We'll just do creative section shapes. And we're also going to link to my CSS file. So we can add in a link, rel is going to be equal to style sheet. And then an href is going to be just style.css in this case, because we don't have it, you know, it's, we just have those files there, nice and easy to link to that style sheet right there. And I'm doing that now just so I don't forget later and wonder why my CSS is not working. With that out of the way, we can move down into the body and start adding some content. And the very first thing I'm going to do is just put in a header. And inside my header, we can put an h1, which I can give the class of site title. And let's just put in the same thing we had above, creative section shape. So whatever you want, you can give this any title you want, obviously. And then we can come down here and we're going to have six sections. I'm just going to create one. So it's very obvious what each one is going to look like. And then we can duplicate those sections for each different part. So each section, well, we're going to use a section like that. And then inside each section, I am going to include a div with a class of wrapper. And this is just to hold the content in the middle of the page, instead of letting it go all the way to the edges if we're on a wider screen. And then inside of there, we will have a little bit of content. So let's put an h2 with a class of section title. And we'll leave that blank for a moment. But we'll also come in and just give it a little bit of filler text. So we actually have some content inside each one of these. So for the content, if you need filler content, we can use emit as well, where I can do paragraph and then my triangle bracket, which is saying inside my paragraph. And then I can just write lorem. And then if I hit tab, it's going to give me a whole bunch of alt text. Let's turn off word wrap or turn on word wrap, I should say. And then we end up with my h2 and then a paragraph with a whole bunch of content in here. And the reason I haven't actually put anything on this yet is because each section will have a different title on it. But each one of our sections will just look like this for simplicity, just so we have something to work with. So we can start right away by taking this entire section. And we could copy and paste that five times if we want. So we'd end up with six total sections. Or I can push shift alt and down. And on a Mac, the same thing would be a shift option down. But I'm on Windows, so shift alt and down. And that duplicates my entire selection. And you know what? We'll undo that and include a couple of empty lines there because we can duplicate those empty lines as well. And same thing, shift alt down, it duplicates it. So that's two sections, three, four, five, six. And then if I come and look, we have all those sections there. And I'm going to come all the way up to the first section here. And I'm going to add a class to this because this is the first one we're going to work on. And so we'll give that a class is equal to diaggonal, which I always misspell. And let's also put that as our title right here, our heading. So diaggonal, just like that. And I'm going to save my file. And let's open this up and see what we have so far. So for this, I'm going to use the live server extension, which anytime we save, it will automatically update our project. So it just makes life a little bit easier when we're making changes. We don't have to refresh the browser manually. And we'll shrink VS code down. And as we can see, we have our content here, even though it is not looking too fantastic yet. So now we want to jump on over to our style.css to start styling this up. Now, the very first thing I'm going to add into here is very simple. We're doing box sizing border box to make things a little bit easier to work with. And our body margin zero to get rid of the default margin that is on our body. Another thing that I like to do, especially these days, is it's a little bit bright. And I'm usually using a dark theme. So what we could do is come in, say, HTML and use color scheme of dark. And we could do dark light like this or light dark. But what this does is it switches the user agent styles to a dark theme if your browser settings or your system settings are set to dark mode. And if they're not, it will use a light mode instead. And it just makes things a little bit easier to work with and less bright on our eyes. So I'm going to switch that over. And then we can keep going from there. Next, I'm just changing my font family to system UI, which looks a little bit nicer, especially just for a quick font choice. My font size bigger for the demo and a line height, just because the default line heights a little bit tight. Next, if you remember, we'd set up a wrapper to hold the content. So setting that up really quickly, we can give that a max width as well as the margin left and right of auto just to center things. And if you'd like a faster way to be able to do that, we can actually switch this over to a margin inline, which is a logical property, which means generally speaking, your left and right margins, if we want to oversimplify it a little bit, but that's what that will do. And now we have that centered on our page. The only problem is if it gets too small, it will go all the way up against the edge of the page, which does not look fantastic. So we can also add a bit of padding inline of say one rem. So now when our browser gets too small, we just stop the text from touching the edge of the page, which makes life a little bit better. Next, some simple styling on our site title and our section title just to make them a little bit bigger, because why not? You know, one thing for this that's going to be very important is each section, we sort of want to make sure they're separated enough because we will be adding background colors to them and everything. So if we just came down, just to show you what I'm talking about, if we said background is light blue, we can see that right now the content of them is very stuck together. And we don't want to have that happening. We want to give them a bit of room to breathe for these effects that we're going to be creating. So on each section, we can give this some padding and I want it on the top and bottom. So the opposite that we did before with our margin inline, which was acting as our right and left with the logical property, we can do the logical property for the top and bottom and I can come in with a nice healthy five rem, which gives each section a lot of space for us to work with. So that will make life a little bit easier and we can turn off that light blue and go back to our dark mode. Now that we're ready, we can start working on this diagonal section. So if you remember, we did give that the class of diagonal. So let's come down and start working on that one diagonal. And we're going to give this a background image. And the reason we're doing the background image is because we want to do a linear gradient because again, as I said in the intro, we want to make sure that it can work with anything we throw at it. So this background image here is going to be a linear gradient, like I just said. And I'm just putting this on multiple lines to make it easier to see instead of it having to stretch across or to rely on word wrapping because it makes it a little bit awkward. But you can keep all of this on one line if you want in your own code. Now I already have this saved off screen so I'm just throwing a few different colors in here that I think look nice. There will be some contrast issues probably with the text, but we're not going to stress too much about that. And there we go. We can see that we have that gradient coming into this section. Just be careful with text normally to make sure that the contrast is high enough with the background that you have. In this case, I'm more worried about the effect but just make sure your text is nice and readable. For this diagonal section, what we actually want to do is rotate the background, but we want to keep the text straight. And there's two different ways we can do this. We can actually skew the background and then on skew the wrapper that's inside of it. Or another approach that I like is using a pseudo element for this. So to get started on that, we can copy our class that we have there and paste it here and add an after. This would also work with a before if you don't want to be using an after. Either one is fine because it is a pseudo element. We do need an empty content property on there. And if you're not familiar with pseudo elements, I'm really a big fan of them, but we do have a long series that goes into the very basics of them. So if there's something that are new to you, I'll link to that down in the description below. So we have the content that is here and then we are going to give this. I'm going to give it a background color for now just so we can actually see what we're working with. So we're going to go in with a steel blue for now just to give it a color. So we'll be able to visualize what's happening before we get this all set up and working. And we're going to give this a position of absolute. Now, because this is getting a position of absolute, I don't want it to take the entire viewport up. So we're going to come back up to my original selector here. And we're going to give this one a position of relative to make sure that the pseudo element here stays within this. And what that's doing is it's going to make this section the containing block. So our pseudo element, which is an after, but it's living inside of this section. This is the containing block. So our pseudo element can't escape outside of it with the position absolute on there. And then we could come in with a top, bottom, left and right of all zero. Or if you're ever doing that, we can use inset instead. And inset is another logical property and it's a shorthand for top, bottom, left and right. So in hitting save there, we can actually see that that blue is now covering the entire div that we were working with. So obviously we need to get it to be pushed back and we also need to rotate it. So let's start with the rotation. And for that we're going to use a transform. And we're going to say a skew y and you can skew on the x-axis, the y-axis. And I'm going to say a negative five degrees here and hit save. And you can see what that's done is we've taken what we had like that and we've skewed it at a different angle or whatever we want to call it. So it's now going this way instead. But obviously there's problems here because we have our background image, that gradient is actually over here rather than being on this. And this of course is in front of our text which is not a good thing. So to fix it from being in front of our text, what we can do is give this a z index of negative one which means push it backwards. You can see it's gone all the way backwards and I'm just going to move that z index up so it's with my positioning because I like keeping related things grouped together. And now what I'm actually going to do is take this background image instead of having it on the original div. We're going to remove it from there and we're going to move it down and replace the background that we have right here and hit save and we can see that it's updated we don't have a background on the original div. We just have the pseudo element that is bringing it in. The nice thing with this is as the browser is resized it's always keeping that same skew angle on it so we're not getting weird crazy angles that you can get with a clip path. And right now this is working really well but if this section was inside of something else with a background color there is the risk that the pseudo element here with the negative z index on here would actually go behind all of that and we wouldn't see it. So just to prevent that from happening where we've set up our diagonal here I'm also going to use an isolation isolate. And that means that the negative one z index here it has to stay within the diagonal the same way as before when I said position relative where we're keeping our pseudo element here contained within the section that called diagonal the isolation isolate is keeping the z index contained within that diagonal as well. So similar just working with different things but now that just sort of future proofs things from stuff potentially breaking along the way. And we did say I want to make this a little bit easier to customize and to maintain and one issue that comes up with having this over here if you wanted to make a change to it and you have your diagonal then you're going through all this other code to get eventually to the transform that you have and that can be a little bit annoying. So what we can do is all the way up here we could come and choose the skew angle. And we can put negative five degrees where you know what I'm going to switch this to a five degrees just so we can see a change happen. And then we can use that then this is a custom property. So down here my skew we can replace the negative five there with our custom property. So this will be my skew angle hit save and you can see that it is switched over. And the nice thing with that now is we just come on to this original selector and this is controlling everything and you could even bring the background color and have that as a custom property as well. So I'll set that up really quickly. So now I've brought that linear gradient over here as a background and we have it set up here where I have the background there. Now the one issue is I am using background image here so just to make this a bit more robust we can use the background shorthand so then it will work with the gradient but if I were to replace all of this with just a solid color instead and I hit save on that it will use just that solid color. Of course the formatting is a bit weird but it's still working. We can go back to having it as a gradient and it will work with a gradient as well and we can update this and change the angle and we don't have to hunt down these different things that we might want to be able to customize. Now let's jump back over to our HTML and we'll scroll down a little bit. Now this section here which will be this one we're just going to have that as some extra content. So some content here. And the reason I want to do that is just so we have sort of a buffer between the different sections that we're creating here with these effects so we can see them working and then I'm going to scroll down to the third section and on that one we can give that one a class. I'm going to call it spikes because I'm just not very creative with this. It's not really spiky but I don't know we can make it spiky so I'm going to call this and just put that as the title as well. So we're working now on this section right here. Now let's jump back on over to my CSS and we're actually going to have to do a bit of work to get this one to work the way we need to and create an SVG but it's going to be a lot simpler than you might be expecting but we'll save that until we're ready for it. So let's come here on my spikes and set a few things up quickly and we're going to be using some position absolute once again on pseudo elements so on the spikes itself we can put a position of relative right away just because I know I'm going to be doing that and let's also come in here with a background that I've once again saved off screen so I'm just going to bring that in and so once again I'm just setting up a simple gradient and maybe on this one we should come in and say that the color is going to be black just to make it a little bit easier to read the text on that one. And so there we go we're ready to get started and as I said we're going to be using pseudo elements for this one and we're actually going to use a before and an after so we can start off by saying our spikes before and I'm going to just duplicate that line and then say after right there make sure they are comma separated so we're selecting both the before and after to set up the basics of them so once again we need a content on there to actually make the pseudo element appear in our DOM then we're also going to put in a position of absolute on there as well now most of the time I wouldn't actually declare a width 100% because block level elements already have a width of 100% on them but once we use the position absolute here that goes out the window and I do want to make sure these are stretching the entire width of our div so I will give them a width of 100% to get them stretching or I said div we want them going from the left to the right of our section so we can give them the width of 100% and for now I'm going to give them an arbitrary height and this number will be changed a little bit later on but we'll give them a height of 50 and let's also give them a background of purple just so we can see them for now and now we can at least see where they are and if you are working with pseudo elements either giving them backgrounds or borders definitely is recommended even if you will eventually turn it off because you have some decorative element in there or something and what we want to do is we want this one to be all the way at the top and we want this one to be all the way at the bottom so to do that we'll have to select each one individually so we'll start with my before and we'll come down and we'll say that it has a top of zero and then we can duplicate that and give the after and give that one a bottom of zero and now as we can see this is positioned at the top and this one is positioned all the way at the bottom now for the next part here I am going to bring in a tool that I'll link to in the description this is called SVG path editor and we're going to create a very simple SVG that we're going to be using and to be able to use this tool it's very easy to do the first thing I'm going to do is click on the plus that's right here and I'm going to choose a move to and this is going to be our starting point and if you look in the top left here let's just zoom in a little bit the top left is the coordinates of what that is so we want to start that at a zero zero so I'm just going to click to place that there now what I'm going to do is do a append new command and we're going to do a line to and for this I'm going to move all the way over to the 10 zero so again this is just the coordinates of where we're moving to so the L is my line we're going to 10 zero and I'm going to click we're going to do the same thing line to and I'm going to move down and I'm going to choose five five if you did a different shape here though it wouldn't really matter the important thing is we're making a triangle so just if it's offset one way or this way or that it might look a little strange but I'm going to go to the five five and I'm going to click and we don't want another line to to close it off we can just go all the way down and choose close path and if I choose that it just closes it off and everything is done and then at the top right here we have a download as svg so I'm just going to click that to download my svg the important thing here make sure sometimes it's set to stroke we do not want a stroke we want to make sure it's a fill only the color here is not very important the only thing that's important is we only have a fill and no stroke this should be fine with the defaults if your numbers here are different it might be the coordinates used are different because usually the default matches the size of the svg that you've just created and then we can download that with that out of the way I can move this down I can open up my folder here or in vscode and this time what we're going to do is create a new folder and I'm going to call it assets we don't have to create this but I'm going to put it in there it could be images whatever it is you generally work with just save this where you'd have your images and your assets and all of that and I'm just going to bring in that svg that we created and drop it in there and I'm just dragging and dropping right from windows and it copies it into our project now I can right click on this to rename it and we'll just call it triangle dot svg and that's perfect so we can close that down move that off you can see the svg right here I'm going to leave it open because there is an important change that we will have to make to it but we won't do that quite yet we'll come back to that in a minute what I will do though is come back to my style.css right now and what we actually want to do is to use the triangle as a little bit of a clip path and this is where things get kind of interesting now I'm running chrome on the side here and we're going to be using something called image mask this is something I've covered before it's another fun use case I've found for it recently but because we are doing this in chrome mask image does actually have to be prefixed still it's one of the few properties that does so I'm going to be starting off by prefixing everything and then at the end we'll add in the non-prefixed versions just because if we want this to work in safari and in firefox we need to have the non-prefixed version but we can just copy and paste code duplicate what we have it's not difficult but we're going to first start here by doing a webkit and then we're going to do mask image and mask image works almost exactly like background image does so here we can come in with a url and I can just go to my assets and go to my triangle.svg right there and let's just there we go so we have my triangle.svg and now if I hit save you can actually see what it's doing is it's only showing me the triangle it's actually cutting out the triangle in certain parts and it's masking it along the way and just like a background image it's repeating itself across so we don't have just one triangle we have it repeating all the way across of our div and it's giving us this shape like this and you might already see the direction I'm going with this but before we get it to look exactly how I want this to look and exactly how we want it to work the first thing we're going to do is set up the one on the bottom so that one's nice and easy because that's our after here and we just need to flip these around so I'm going to do a transform and then just rotate 0.5 turn because we can use turn units in CSS this is the same as 180 degrees and it flips those ones upside down so it's looking like that and you'll notice what it's using is the background color we have here anywhere we see this is where our triangle is and anywhere else it's getting masked away now ideally we want to be able to control what these look like by changing their width and their height but because this is an svg it's actually going to always try and keep this aspect ratio of how we've made it and we're going to scroll all the way to the end of the svg I'm not going to do this on the path I want to make sure I'm on the svg I'm going to go all the way over to after the view box here and I'm going to just paste in this which is preserve aspect ratio equals none and that just means that the svg is going to be able to be squished and stretched because without that we try playing with the height and the width it's going to always keep the aspect ratio we have and it won't be able to let us control the shape of our spikes very well so this is going to open up some extra doors for us and you can see right away that instead of repeating itself all the way along it has made this sort of interesting shape that's showing up on here so it's kind of a cool way to start things and if you did turn word wrap off I just did it like that because as you can see it's a little bit awkward to look at it this way so just make sure that this is an attribute again preserve aspect ratio is equal to none on the svg itself and now we can start customizing this a little bit so we can close the svg file if it's open and just focus on our css now and the first thing I want to do is make sure that my background color is always going to match the background behind it and this is one of the problems with this is well it will work with a gradient background on the section it will not really work if you have a background gradient behind it I do apologize for that but it's as robust as I could make it so what we're going to do is first come all the way up to the top and I'm going to go here and I'm going to do a root I'm going to do body bg and I want to make a custom property for my site's background color and you'll see why in a second but for that I'm just going to come in with an hsl here which is a very dark color similar to what we have maybe we'll just change that a little bit to make it a little bit lighter and then what we'll do is we're going to use this body bg on our body here so we can say that background is going to be my var and we can bring that in and copy it a little bit too much and because I'm doing this I'm also going to say color is white as a default even though we'd set up this color scheme to start with just because now if somebody were on a light color scheme they'd end up with black text on a black background so we're sort of we can get rid of that now if you wanted to but we'll hit save and if we go take a look nothing's really changed but the big difference is this is controlling it so if I made this 25 you can see that it's lightening up my background or if I made it 5 it's darkening up and we'll go with something like 12% so it's pretty dark now what I want to do is I want to make sure this purple color is always matching that color so what we can do is we can come down and on my spikes here I'm going to put in spike color and we can map that over to our body bg color and then we can use this spike color right here down here where this background is set up and do my var spike color so if ever you do want them to be different you will be able to make them different but in the meantime they will match and already we have this interesting effect and we could even leave it like this if you wanted to because that's kind of fun actually but the advantage now is again just really fast if I change the color here it's updated both at the same time so it's just a little bit more robust but again the background will have to be a solid color now what we'd like to be able to do though is to be able to customize the shape and the height and all of that really easily and we can actually do a lot of that using other mask image properties or mask property so I should say because they're all related there so we're going to start off and once again we will need webkit and we're going to say mask size and just like background size we can give it two properties we can give it a height and a width so the first one is the width so if I said 10 pixels and then we can give it a height of like 50 pixels and this should make things a little bit more spiky and there you go you can see it has kicked in and is working and we have a very spiky section but one thing I have done is I've just happened to have used the same height here that I used right there and that's important because if I'd set these heights a little bit differently let's say I did a 20 here instead now we've run into a little bit of a problem and the reason this is happening is just like I've said up until now mask image works very much like a background image where we have repeat going on so it has a space of 50 pixels to be living in but the size of the background or the mask I should say is 20 or the height of it is 20 so it does 20 and then it repeats and it repeats until it gets to that total height of 50 and maybe you could even come in with an interesting pattern in this way if that's the type of thing that you'd be after and create another type of border effect and it could be kind of cool but in this case the easiest thing to do in my opinion is to go back up here and we're going to create two more custom properties and there's a few different ways we could fix it one of them is to use a mask repeat just like we have a background repeat so if I do repeat and then I could do a repeat x so then it's only repeating along the x axis but instead of using that what I'm going to do is actually come up here because I want the height of these to be matched anyway because the issue now is if I made this 70 the height of them is actually longer than what's available to it so they're getting sort of cut off along the bottom and it creates a bit of a different shape so to ensure that I can keep everything linked together we're going to come here and I'm going to do spike width is going to be and we'll just put in a default value and then a spike height here and we could say 50 pixels like we had before maybe we'll do 30 and 50 for now and then I can use both of those down here so my spike size would be a bar spike width and then let's just copy that so it's a little bit faster and then this would be my height right there but now the one thing is we also want to use the spike height here as the height of the custom of the pseudo element that we have so that way when we adjust the height we're also adjusting the height of the pseudo element and they'll always match and we never have to worry about things repeating so we don't actually need this mask repeat there so you could have it on just as a backup or just you know just in case things break along the way so now if I came here and I changed the width to say a 50 and I changed the height to a 10 and we go and take a look at them it really completely changes the style and I can control everything that I need here and maybe we'll put those at the top because ideally you're probably leaving this alone and these two would be the ones that you would adjust along the way now I will give a small word of warning because we're using a transform and you rotate on the bottom one there is this risk of rendering issues when if you zoom in or out you can see it's popped up a little bit on the side here when and if I zoom in and zoom out and then you scroll around sometimes they'll go away so it really is dependent on the setup that you have for these as far as I know there's not really a fix for those little small sub pixel rendering issues that can pop up along the way it sort of doesn't look perfect if it's a deal breaker you could actually make a separate SVG for the top and the bottom so you're not rotating anything and then you shouldn't run into any problems with them now everything is good with this but I did say we do have one last thing to do before we move into the next section and it's just taking these ones that have the webkit prefix on it because this is all part of that same line there we're going to just take those duplicate those lines and then on all of these ones where we have the webkit prefix we can go ahead and remove that prefix because we don't actually need it and if you are using the repeat as well we do not need it on there either and we want to keep the webkit ones first and then the non-prefixed versions second so Chrome will use these for now at least until they drop the prefix which I don't know when that's going to be but then Firefox and Safari will use this one and if ever Chrome does update we want these ones to be first so eventually it starts using the non-prefixed versions that come after and with that we can move on down into the next section which is going to be our waves and I said we're new one last thing there and then we could move to the waves but I just want to say the technique we're going to use for the waves we could actually use for the spikes that we have here because we're going to be using a different tool to do it but it's going to be using a similar method or it's going to be using another way of using masks but it's a bit more complex in a sense and easier in another sense but before we get there we could actually do a spiky thing in a very similar vein but it's harder to control and the reason I set this up this way was a we can draw our own and make whatever shape you want and then we can really easily have control over what they are but as we're about to see we can take other approaches to getting a similar type of effect but they're a little bit less customizable on this sense though it's easy enough to be able to customize them as we'll see so let's jump over to our HTML to get started on that and now we're ready to move on to the last section which is going to be our wavy section so let's skip down here we have another filler one and then we have our wavy and you know what I'm actually just to keep it from being all the way on the bottom let's copy and paste one last extra filler section so another filler section here just so we end up with an extra one down at the bottom and at the one just above that let's put in wavy here so we have our wavy comes in and we'll give it the class is equal to wavy and now we can start working in that in our CSS so here let's go all the way down and we can select it with a wavy now once again I'm already coming in with a gradient here just so we have something and we can see this working and this time we're going to use another online tool but this one is the easiest one now this tool is by Tamania Fiff who's of csschallenges.com and also cssgenerators.com and in here I'm going to be setting this to a top and bottom and this is actually using a very similar or not very similar it's using a similar technique to what we just saw but we can generate it here instead of having to make an SVG and use the path and you can actually use a similar method with a conic gradient that we're going to see here but I just wanted to explore sort of different ways we can get to the same thing and the nice thing with creating the path like we saw with the triangles is you could actually make any real shape that you want there but here we can do this with curvature of the wave so we can control how curvy the wave is you can choose how tall it is here so let's just say we want 50 pixels or we can switch over the units that we're using 50 viewport units would be a lot we'll stick with pixels for now and maybe we'll shrink it down to a 25 that looks pretty nice and we'll just flatten it out a little bit more or we've reached the maximum flatness maybe and then I'm just going to click copy css and we'll move this tool out of the way and we're going to come here and paste it in and we'll take a quick look at what it's doing so first I'm just going to remove the selector that it has and so we can see this is using the webkit mask and the mask once again and the way it's working let me just move this over so we can see it a little bit more and what it's doing is it has a custom property here of mask that's setting up a whole bunch of radio gradients so it's using those radio gradients for the wave on the top and the bottom and let's just hit save so we actually see this working and there it is it's there and just like when we were doing it previously with our mask that was using a URL I said that the mask image is very similar to background images and so not only can you give them a URL and give it a path to provide it with a file you can also use it with gradients and radio gradients you can do some pretty crazy things with including making shapes and so this is setting up a whole bunch of circles basically and it's controlling them along the way there so it looks really cool the one problem with this is and this is something that I wanted to make easy to customize this is where this sort of falls apart because there is obviously we have a generator that's doing all of this but the numbers here are a bit hard to make sense of and how to manipulate them and everything so you could probably go through and set them all up but an easier thing might be just to come here and put a comment about mask let's just do it really fast mask created with bat and so if you want to update it once again it's very easy to do and it is customizable but maybe I'm cheating a little bit on this one but to get the wavy shapes in an easy way like this probably the easiest thing is to plug it into a tool and just use the generator that we have because it does generate all these numbers for us and does all the hard work for us where we don't have to which is sometimes nice and you know if you are a developer often working being able to accomplish things quickly is a skill in itself and using tools like this helps us do it and if you enjoyed this video and you'd like to see more that you can do with mask image I have a beginners video that covers the very basics of it and I also have one that looks at a cool animation that you can do with it so those videos are right here for your viewing pleasure and with that I would really like to thank my enablers of awesome Jan, Johnny, Michael, Patrick, Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner on the internet just a little bit more awesome