box-shadow: 5px 10px 5px 12px #888888;
				
			

Video Summary

Alright, we’re going to talk about the spread radius blur box shadow effect. And essentially what we’re doing is we’re adding another unit of measurement right here and this is dedicated to the spread radius of the border and pixels. And let’s just hop over to code pen and see what that is. So what we’re looking at here is I have made the class blur X call to a blur x from the class over here. 

I use 300 pixels with 100 pixels tall 15 pixels padding, 30 pixels margin and I just used a regular coral color, trying to mix it up and try to show you maybe different effects and what you can, you know, different stylings. But with this box shadow is the same one as the blur, but we’re just adding this blur effect to it. So let’s see what this looks like. 

So what happens if we make this 50 pixels so basically we’re just expanding that radius. So now it’s becoming 50 is a little bit too large, it’s going it’s just it’s not really necessarily a blur effect anymore. But what happens if we take this back and maybe we make this 20 Right, but now what we can do is we can come over here and maybe distort this a little bit more and less and 10 pixels to it. Well, that’s a little that’s nice little distort on effect. But what happens if we do let’s say it’s 250 pixels? So now we kind of have a little bit more of a blur effect. Let’s take this back just to maybe 30. And maybe what happens if we realist into 10? 

All right, so now we have we’re starting to play around and we’re starting to get a little bit more of this blur shadow effect given it let’s give it a little bit of a look. Like it’s coming off of the page. It almost looks like you could potentially pick and peel this little card off. And that’s what we’re essentially trying to do with this effect. is trying to make it look look look like it’s like kind of a levitating effect. And what we can do is now let’s take this down, and I don’t like I like how it’s over here. I want to take both of these down to maybe let’s do six and six. And see how that looks. 

All right. I think I like that a little bit better. We can get a little bit of a shadowing effect here. But we also have a bigger we have a bigger radius so and so that way, this shadow affects a little bit larger. So we can actually move that out because let’s look at what happens if we take this off. Right, we got a nice little shadow effect here but now with this radius, we can take a little bit a little bit wider and we get a little bit more of a glowing shadow effect. So that is what the blur extended value does for this property. And now let’s go over to the advanced option and this is the box-shadow property which is the property value that you’re going to run into the most and that most developers use. This is where we can really make that card or this box really looks like it’s levitating from the page. So let’s hop over to the next lesson.