CSS Image with shadow

Images with shadow effect

A box shadow property allows us to draw a shadow behind an element. The box-shadow used to apply an inset or drop shadow to a block element. Since all HTML block elements are considered as boxes, you can apply a shadow to any block-level element.

Image with CSS Shadow

Source Code

<!Doctype>
<html>
<head>
  <style>
    .img {
      width: 400px;
      height: 200px;
      border:2px solid #fff;
      background: url(img/tiger.png) no-repeat;
      box-shadow: 10px 10px 5px #ccc;
      -moz-box-shadow: 10px 10px 5px #ccc;
      -webkit-box-shadow: 10px 10px 5px #ccc;
      -khtml-box-shadow: 10px 10px 5px #ccc;
    }
  </style>
</head>
<body>
  <div class="img"></div>
</body>
</html>

Rounded Corner image with CSS Shadow

Source Code

.img {
  width: 400px;
  height: 200px;
  border:2px solid #fff;
  background: url(img/tiger.png) no-repeat;
  -moz-box-shadow: 10px 10px 5px #ccc;
  -webkit-box-shadow: 10px 10px 5px #ccc;
  box-shadow: 10px 10px 5px #ccc;
  -moz-border-radius:25px;
  -webkit-border-radius:25px;
  border-radius:25px;
}

Rounded Images with CSS Shadow

Source Code

.img {
  width: 190px;
  height: 190px;
  border:2px solid #fff;
  background: url(img/duck.png) no-repeat;
  -moz-box-shadow: 0px 6px 5px #ccc;
  -webkit-box-shadow: 0px 6px 5px #ccc;
  box-shadow: 0px 6px 5px #ccc;
  -moz-border-radius:190px;
  -webkit-border-radius:190px;
  border-radius:190px;
}

Images with inset CSS Shadow

Source Code

.img {
  width: 400px;
  height: 200px;
  border:2px solid #fff;
  background: url(img/tiger.png) no-repeat;
  -moz-box-shadow: inset 10px 10px 50px #fff;
  -webkit-box-shadow: inset 10px 10px 50px #fff;
  box-shadow: inset 10px 10px 50px #fff;
}

Image behind text

You can write text on top of the mages in CSS. CSS image behind text

Source Code

<!Doctype>
<html>
<head>
  <style>
    .img {
      width: 400px;
      height: 200px;
      border:2px solid #fff;
      background: url(img/tiger.png) no-repeat;
      color:white;
      font-size:50px;
      -moz-box-shadow: 10px 10px 50px #ccc;
      -webkit-box-shadow: 10px 10px 50px #ccc;
      box-shadow: 10px 10px 50px #ccc;
    }
  </style>
</head>
<body>
  <div class="img">Wild Life....</div>
</body>
</html>

Shaped Image with CSS Shadow

Source Code

.img {
  width: 270px;
  height: 150px;
  border:2px solid #fff;
  background: url(img/fish.png) no-repeat;
  box-shadow: 0px -10px 30px #ccc;
  color:white;
  font-size:50px;
  border-top-left-radius:75px;
  border-top-right-radius:75px;
  border-bottom-left-radius:0px;
  border-bottom-right-radius:0px;
}