Whit box-shadow property you can create a deepness for html elements and give them a shadow (be careful of the numbers you use, do not exaggerate!)

box-shadow: 1px 1px 3px #292929;

box-shadow has 4 properties:

1- distance in x-axis

2- distance in y-axis

3- The amount of darkness

4- shadow color

You can even have 2 box-shadows and make unique shapes:

box-shadow: 1px 1px 3px green, -1px -1px 3px blue;

HTML:

<div class="box"></div>
<div class="box-a"></div>
<div class="c-box">
   <img src="https://cdn.tutsplus.com/net/uploads/legacy/855_cssProperties/images/tuts.png" alt="Tuts" />
</div>

CSS:

body {
  margin: 20px auto;
  font-family: "Lato";
  font-weight: 300;
  width: 600px;
}

.box {
  box-shadow: 1px 1px 3px #292929;
  width: 200px;
  height: 200px;
  margin: 20px;
  display: inline-block;
}

.box-a {
  box-shadow: 1px 1px 3px green, -1px -1px 3px blue;
  width: 200px;
  height: 200px;
  margin: 20px;
  float: right;
}

.c-box {
  position: relative;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
  padding: 10px;
  background: white;
  margin-top: 50px;
}

/* Just making the image fit the box */
.c-box img {
  width: 100%;
  border: 1px solid #8a4419;
  border-style: inset;
}

.c-box:after {
  content: "";
  position: absolute;
  z-index: -1; /* hide shadow behind image */
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  width: 70%;
  left: 15%; /* one half of the remaining 30% (see width above) */
  height: 100px;
  bottom: 0;
}