# BoxShadow property in CSS

In this blog, we are going to learn a CSS property called BoxShadow, so let's get started.

First of all, let's go through the syntax of this property.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7ledm87ds6gig7wo5rq.png)
__BoxShadow without blur filter__
<br>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2ddrwsujhbsc72t1mj7.png) 
As you can see in the picture there is a black shadow applied to our div but it still does not look good, so to make it look cool, we have to apply blur on it.

__BoxShadow with blur filter__
<br>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbp71x4iena4infkpzsg.png)
 
Now it looks cool, doesn't it?? 

CODE:
<br>

<br>
Now it's seen some more examples of Boxshadow Property.
__Box-Shadow-2__
<br>

%[https://codepen.io/sumeet1610/pen/jOmEzLv]

__Box-Shadow-3__
<br>

%[https://codepen.io/sumeet1610/pen/KKmwoXr]

__Box-Shadow-4__
<br>

%[https://codepen.io/sumeet1610/pen/BaRyrmY]

__Box-Shadow-5__
<br>

%[https://codepen.io/sumeet1610/pen/JjNoLMY]

__Box-Shadow-6__
This effect is also known as Neomorphism and you can use this effect for buttons, for Nav-bar, Card etc. in your website.
<br>

%[https://codepen.io/sumeet1610/pen/poPvLaG]

__Box-Shadow-7__
<br>

%[https://codepen.io/sumeet1610/pen/jOmEzzQ]

<br>

Hope you like this blog, plz do like this blog and follow me for more tech blog in future 😃.

##Next Blog Topic:##
Best VS CODE extensions for beginners.