A drop shadow is a graphical effect that simulates the shadow of an object and gives the appearance of further dimensions. Though CSS does not have a 'Drop Shadow' property here's how it's possible to leverage style sheets to keep your images separate from their drop shadow. What follows is a tutorial for how to create a drop shadow using CSS. As is the nature of a wiki, please edit, refine and generally make this tutorial more accurate / easy to follow.

Raw Materials For Creating a Drop Shadow using CSSEdit

Use the images and code below to recreate this drop shadow effect right now.


CSS CodeEdit

<style type="text/css">
.img-shadow {
background: url(ShadowAlpha.png) no-repeat bottom right !important;
background: url(Shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;

XHTML CodeEdit

<div class="img-shadow">
<img src="Rothschild.gif" alt="Rothschild Photo">

Reference LinksEdit

Community content is available under CC-BY-SA unless otherwise noted.