You can create beautiful drop shadows in CSS without the need for images (you know, like back in the olden days). With just a little CSS, you can create a few different drop shadow effects, like lifted paper drop shadows, perspective drop shadows, horizontal curved drop shadows, and vertical curved drop shadows. The example code is taken from a drop shadow demo page from a few years ago.

First, we’ll set up the shared properties in a class called drop-shadow, like so:

.drop-shadow {
    position:relative;
    float:left;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before,
.drop-shadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}

.drop-shadow p {
    font-size:16px;
    font-weight:bold;
}

The original post that I got the CSS from includes vendor-prefixed code, and that made sense several years ago when support was sparse, but I think we’re at a point now that it’s not necessary.

Now, for the first effect, we’ll call it lifted, we’ll set up the CSS for that:

.lifted {
    border-radius:4px;
}

.lifted:before,
.lifted:after {
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    max-height:100px;
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    transform:rotate(-3deg);
}

.lifted:after {
    right:10px;
    left:auto;
    transform:rotate(3deg);
}

Now when you include the element, whether it’s an image, a div, or another page element, you will just call it with class="drop-shadow lifted". You can check out the demo page for all of the effects.

You would implement a perspective shadow the same way, using the css below, and calling class="drop-shadow perspective".

.perspective:before {
      left:80px;
      bottom:5px;
      width:50%;
      height:35%;
      max-width:200px;
      max-height:50px;
      box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
      transform:skew(50deg);
      transform-origin:0 100%;
}

.perspective:after {
      display:none;
}

For more effects, visit the demo page, and simply Right Click>View Source.