Specifically, we're going to add a shadow that looks like this. Where we have a box shadow. It's called an inset box-shadow. What it does is it can give a little bit of depth to elements on the page.

Right here, you can see how we have the map, and because it has the box-shadow inset, inside of this section, it almost looks like we have a real-world map that is sitting on top of this. This is a feature I've been asked to build multiple times, so I wanted to include it in this guide.

I'm going to switch back to what we're going to be building it on, and the goal will be to place it right here at the bottom. Let me switch back to the code, and let's find in index.html where this is going to go.

We have this features-section. That is the CSS class that we're going to have, and we want to have the box-shadow at the very bottom here, but only on the bottom. We don't want it on the sides or the top, and so that is the element that we're going to select.

If I come to homepage.css here, I already have this in the code. I already have a featured section with some styles. What we're going to do is we are going to add a box-shadow here. We can do it with a single line of code.

I'm going to write out the entire line. I've played around with this a few times, to get it where I wanted it to be. I'm going to write it all out. Don't worry if you do not understand it. Then, we're going to dissect it afterward. I'm going to say ``.

Then I'm going to use rgba. What that allows me to do is instead of giving a hexadecimal value, it allows me to pass in the percent of red I want to use, of green, of blue. The main reason is because it gives me the ability to have an alpha color, which means that I can have the shadow be slightly transparent.

Usually, I like to use hexadecimal colors, just because I find that it's a little bit easier to type, once I have picked out the ones I want, but if I ever want to work with transparency, using rgba is a good option.

Here, what I'm going to do for these values is I'm going to say 0, and then for the next one, for this green value, I'm going to go with 0 once again, and then here I'm going to say 0, and then for the alpha, I'm going to say 0.58.

homepage.css

box-shadow: inset 0px -26px 79px -8px rgba(0,0,0,0.58);

Let's close that off, and let's see if that gives us what we're looking for. If I hit refresh, you can see our border's right there.

Now, if you've never worked with box shadows, then that might seem like a little bit of magic because we have all of those weird values. Your question should be, how in the world will I know what to type in? Well, that's what we're going to dive into, seeing exactly what each one of those values represents.

If I select the features section and come over here, you can see that we have each one of those values that I typed in. If I want to change one of these values, so the very first one, if I want to change this to 10, do you see how on the left-hand side let me change it to 100. Do you see on the left-hand side? that's what got added.

What we're doing here is we're saying, I do not want any values on that left-hand side. I want the 0px there on the left. Now, what does this represent? Well, we have -26px. If I remove that, you can see that that would give us a shadow there on the top.

If I say 0, it still gives me a little bit of shadow, so that's not what I'm wanting, and so that has to deal with the up and down value and where the shadow is sitting.

Let's move down to the next one. That's at 79. If I change this to 0, you can see that that deals with the level of blurring that takes place. Right now, at 0, it pretty much is no blur. It's just like a regular border. With 79px, that gives a nice little blur right there.

Okay, we're on our very last one. This was at -8px. If I just remove that and say it's 0, you can see that has to deal with the right-hand side. If I put it at 10 or even 100, you can see that that is bringing it in even further, but we do not want that. I think that just going with -8px gives exactly what we're looking for.

Then, once again, this color is whatever color that you want to use. Here, we're using this transparent kind of white, in a sense, or I'm sorry, transparent kind of dark, in a sense. That is giving us exactly what we're wanting. Now, that is a full walkthrough of how the box-shadow property works in CSS.

Another tool that is very helpful is there are plenty of box-shadow generators. Whenever I'm trying to come up with a new one, I'll usually use one of those. If you type in CSS box shadow generator, you'll see there are all kinds of these available. If you click on one of these, CSSmatic is one of the ones I use the most.

If you go, you can see it gives you a starter, and it gives you all of the code. You can see, it has each one of these values, and so I can change the horizontal value, and notice how that left side is changing, so that left property. Right now, it's at 11. Ours was at 0, so you can see that has to deal with the horizontal length.

Then, the vertical length, right here, is that second property, so do you see how this is mapped directly to what we just walked through. The first item is for the horizontal length, the second one is for vertical length.

Now, let's look at that blur radius. Right now, it's at 5px, but if we want to blur it more, you just drag this more. You can see that you can also just change the value to whatever that you're wanting.

Now, the spread radius. This is that very last one. This is how tall or wide, or I should say, it's just the overall size, the overall area that it takes up.

You can see, with each one of those, you have the ability to control the box shadow and give it any kind of coloring that you want.

Now, we also have the colors here. You have the shadow color, so at black, this is exactly what we have, where each one of those values is 0. If you wanted a purple one, then you can drag it there, and you can see it automatically rendered the rgba code for you.

With the opacity, you could make this even more transparent, just like this, and then you have the ability to use the last property, which is outline or inset. We used inset, but you could use outline, as well.

Now, I'll include a link to the CSSmatic in the show notes, but, and as helpful as this is, I don't want you to feel like you just have to rely on this. I don't want you to think that there's magic going on here.

All that is happening is this gives you a way of having a tool where you can preview what it looks like before you put it into your code. Hopefully, you can see that this isn't magic. Each one of these properties is simply mapped to a style here. It's a way of controlling how that box-shadow looks.

Then, from there, you can copy this and paste all that code directly in. It includes the web kit and the Mozilla, which is Firefox, different styles, but from what I've seen, the box shadow for me has worked, just by typing out the box shadow.

Definitely, feel free to copy all of these, because it's not going to hurt you to bring all of them into your program. Congratulations. If you went through that, you now know how to work with box shadows in HTML and CSS.

Resources

• Box Shadow Generator