What is CSS BOX Shadow – Example with Code

What is CSS BOX Shadow – Example with Code

Hello guys welcome back to the ProjectFreeCode blog today we are going to learn and I will be telling you everything about CSS box-shadow where we will use it or what is the reason to use it everything about and many more things so now let’s start so I am going to start by just giving an answer to the simple question so here’s the question

What is CSS box-shadow?

CSS box-shadow adds shadow effects around an element’s frame I will explain this point by using an example if you write any text or while editing an image you will be seeing an option called shadow you will be getting the reflection of the text or image you can adjust it according to yourself there are many types like

• Top Box shadow

What is CSS BOX Shadow – Example with Code

• Right Box shadow

What is CSS BOX Shadow – Example with Code

Bottom Box shadow

What is CSS BOX Shadow – Example with Code

• Left Box shadow

What is CSS BOX Shadow – Example with Code

top/right/bottom/left all box shadow

What is CSS BOX Shadow – Example with Code

Now we will be discussing everything about each and every shadow box and telling you the code and also telling which side the shadow will be visible

Explanation AND Code:

box-shadow: if you want to give shadow to the any of the elements then you can use this or you can create this type of shadow box CODE:

For all types of box-shadow, we create different div to see what all box-shadow look like. So we use html div with the double class as you know we can use multiple classes in html for styling them in different so we use box class as a universal class and different class for different div like a top, right, bottom, left, and last we create all name class so we see Shadow in this class.


<div class="box top"></div>
		<div class="box right"></div>
		<div class="box bottom"></div>
		<div class="box left"></div>
		<div class="box all"></div>


In css, we style every box with unique stylings so we get every type of box Shadow. 1st we use box class in every html div for styling box and every box has the same style of box, then we give box Shadow to every box with their unique class

What is Flexbox in CSS? A beginner-friendly guide to it

Now we have 5 css classes so we style every class according to top, right, bottom, left, all, and give a css property called Box-shadow we have assigned 4 values to and assigned color for box Shadow, we can give 4 properties in negative also. In our code, you can clearly see how we achieve css box Shadow.

.box {
				height: 150px;
				width: 300px;
				margin: 20px;
				border: 1px solid #ccc;
			.top {
				box-shadow: 0 -5px 5px -5px #333;
			.right {
				box-shadow: -5px 0 5px -5px #333;
			.bottom {
				box-shadow: 0 5px 5px -5px #333;
			.left {
				box-shadow: 5px 0 5px -5px #333;
			.all {
				box-shadow: 0 0 5px #333;

Final OutPut

See the Pen CSS3 Box Shadow, only top/right/bottom/left and all by Mark Plattner (@capnmarrrrk) on CodePen.

Here we share this codepen code for you can understand easily and also you can change their value from positive to negative and also change their color value and see how to box Shadow color and their opacity and this all thing change.

Hope you understand box Shadow in this our article, we also are not perfect in anything, if there is any feedback please do comment or you can also contact us using our contact form!

Visit our more articles on this website! Have a nice day CODER

My name is ankit Dungawat Know as codewithrandom, I am frontend developer and run a Instagram page over 140k followers so I daily share new tutorial or project on this website. I run more then 3 website or 2 Instagram pages.

Leave a Comment