Different types of Box shadows using CSS

Box Shadow

Defines the Box Shadow of the element. The box-shadow property attaches one or more shadows to an element.

the property box-shadow:none; is used to Removes any box-shadow that was applied to the element.

the property box-shadow: 2px 6px; is used to two values the first is the horizontal offset the second is the vertical offset The shadow color will be inherited from the text color.

the property box-shadow: 2px 6px red; is used to define a color as the last value. As with color, you can use color names, hexadecimal, rgb.

HTML

<div class="split">
	<h1>1. Shadows </h1>
	<div class="shape box-shadow1">   
	</div>
	<div class="shape box-shadow1">	   
	</div>
	<div class="shape box-shadow1">	   
	</div>
</div>
<div class="split">
	<h1>2. Shadows </h1>
	<div class="shape box-shadow2">	   
	</div>
	<div class="shape box-shadow2">	   
	</div>
	<div class="shape box-shadow2">	   
	</div>
</div>
<div class="split">
	<h1>3. Shadows </h1>
	<div class="shape box-shadow3">	   
	</div>
	<div class="shape box-shadow3">	   
	</div>
	<div class="shape box-shadow3">	   
	</div>
</div>
<div class="split">
	<h1>4. Shadows </h1>
	<div class="shape box-shadow4">	   
	</div>
	<div class="shape box-shadow4">	   
	</div>
	<div class="shape box-shadow4">	   
	</div>
</div>
<div class="split">
	<h1>5. Shadows </h1>
	<div class="shape box-shadow5">	   
	</div>
	<div class="shape box-shadow5">	   
	</div>
	<div class="shape box-shadow5">	   
	</div>
</div>
<div class="split">
	<h1>6. Shadows </h1>
	<div class="shape box-shadow6">	   
	</div>
	<div class="shape box-shadow6">	   
	</div>
	<div class="shape box-shadow6">	   
	</div>
</div>

<div class="split">
	<h1>7. Shadows </h1>
	<div class="shape box-shadow7">	   
	</div>
	<div class="shape box-shadow7">	   
	</div>
	<div class="shape box-shadow7">	   
	</div>
</div>

the property box-shadow: 2px 4px 10px 4px red; The optional fourth value defines the spread of the shadow.

The spread defines how much the shadow should grow it enhances the shadow. we used a Properties position:absolute, box-shadow: 0 15px 10px #777; transform: rotate(-3deg).

CSS

.split{margin-left:50px;margin-bottom:50px;}
.split:after{content:'';clear:both;display:block;}
.shape{width:250px;height:300px;float:left;margin-right:40px;background:#fff !important;}
.box-shadow1{box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
border-color: rgba(223,225,229,0);}

.box-shadow2{-webkit-box-shadow: 2px 2px 8px 0px rgba(217,217,217,1);
-moz-box-shadow: 2px 2px 8px 0px rgba(217,217,217,1);
box-shadow: 2px 2px 8px 0px rgba(217,217,217,1);
border-radius:7px;}

.box-shadow3{box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);}

.box-shadow4{
     background:#f1f1f166;
     box-shadow: 0 10px 6px -6px #777;
}

.box-shadow5
{
  background:#fff;
  position: relative;
  border: 1px solid #efefef;
}
.box-shadow5:before, .box-shadow5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.box-shadow5:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

.box-shadow6
{
  background:#fff;
  position: relative;
  border: 1px solid #efefef;
}
.box-shadow6:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}

.box-shadow7
{
  background:#fff;
  position: relative;
  border: 1px solid #efefef;
}
.box-shadow7:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(3deg);
}

The horizontal offset (required) of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.

The vertical offset (required) of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.

Leave a Reply

Your email address will not be published. Required fields are marked *