div{
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #888888;
}
div{
border: 1px solid;
padding: 10px;
box-shadow:
0 6px 24px 0 rgb(0 0 0 / 12%),
0 3px 8px 0 rgb(0 0 0 / 6%);
}
				
			

				
					
box-shadow: 5px 10px #888888;
				
			

Video Summary

Alright, this is the box-shadow property. And what this is used for is to create a shadow effect around a certain element or a group of elements. It’s most commonly used for card boxes or menu boxes. So you think about a menu and you hover over a certain menu item and a drop down comes down. Sometimes you’ll be able to see a box or a shadow effect from that. That makes it kind of separate from the menu and the elements below. I’m also tools you’ll see this in card boxes. And a card is basically a box that has maybe a title picture icon, some text, and maybe a button. And you’ll see these when people are trying to emphasize maybe multiple different services that they have. And using a shadow effect kind of gives it a levitation off the screen. It gives more of like a 3d effect to your website. And it’s really something that a lot of these developers use to make your website look very professional. So I’m going to show you guys four different box shadow values that we can use. 

And all of them are fairly intricate and I’m going to go through them one by one and we’re going to start off with these just basic box shadow effects, right, and this is, as we can see here, we just have five pixels, 10 pixels, and a hexadecimal color. And basically what this does is that these first five pixels are the first unit of measurement in pixels. If you put it if you have it as zero pixels or zero, you’re basically centering that shadow you’re not going to have a shadow effect. But if you have a positive number and puts a shadow to the right, and if you have a negative number it puts a shout to the left by how many pixels you can leave pixels you specify. Now with the second number in the basic box shadow, the same thing zero equals center but positive equals bottom and negative equals top. So if this was a box that we were shadowing, this would have a five-pixel shadow to the right and a 10-pixel shadow to the bottom, and this would be the color of the shadow. So I think the best way to show this is to hop in the code pen and start playing around with this basic shadow property.