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

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

CSS round corner image 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

CSS round image with 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

CSS image 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

CSS shaped image with 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; }