While I indicated that the last Curved Dropshadows With Pure CSS article was the final in the “curved shadows” series three weeks ago, I realized today that there was one other method for creating the impression of curved shadows under elements.

While this technique uses much the same idea as the previous two examples – relatively positioned pseudo-elements aligned to an absolutely positioned HTML element – it generates the “shadows” via a different method: rather than using the box-shadow property, it creates the appearance of a curved shadow by using a radial gradient under a photograph by Bobby Bong, used with permission.

A brief explanation: the box for each pseudo-element in this example is 170 pixels wide by 18 pixels tall. The radial gradient starts from the bottom right corner of each box (100% from the left, and 100% from the top) as completely transparent (represented by an rgba value), a transparency that continues all the way to 66% of the distance to the opposite corner, where it starts to become visible. The box is pushed down and under the div (we can't place :before and :after on images, as they are replaced elements). The right shadow is simply the same style declaration flipped horizontally using a CSS3 scale transformation.

The entire CSS, for Webkit:

1. div.curved-shadow { position: relative; }
2. div.curved-shadow:before, div.curved-shadow:after { content: " ";
3. width: 170px; height: 18px; position: absolute;
4. bottom: -14px; left: 20px;
5. background-image: -webkit-radial-gradient(100% 100%, ellipse farthest-corner,
6. rgba(0,0,0,0) 0%, rgba(0,0,0,0) 66%, rgba(0, 0, 0, 0.53) 100%);
7. z-index: -2;  }
8. div.curved-shadow:after { left: 485px; -webkit-transform: scaleX(-1); }