You can create a curved, “lifted” shadow effect for web page elements by using PhotoShop to generate image that will be applied to the element with CSS. As a pixel-based image, a primary goal of process is to keep the shadow as small, light, and responsive as possible.

Step 1: Set up the canvas

Start up Adobe PhotoShop and set the canvas to approximately the size of the element you are going to apply the shadow effect to on your web page. Typically you will only need to play close attention to either the width of the canvas (for a drop shadow) or its height (for a side shadow).

Step 2: Create the shape

Add a rectangular vector shape to the canvas that is approximately the size of your HTML element, leaving enough room at the sides or bottom of the shadow. Leave some space below the shape for the drop shadow.

In this case, I’ve used a rectangle with rounded corners that is the same dimension as the <article> elements on my web page. The color of the rectangle does’t matter, as we are only interested in its shadow.

Step 3: Create the shadow

Use PhotoShop’s DropShadow filter to create the shadow for the shape. Note that, unlike the CSS method I explained earlier, PhotoShop’s Spread function won’t take negative values, so the generated shadow will always be at least as large as the original shape. As you will see, that won’t matter in the long term.

Set the shadow to below the shape and inset slightly on one side, and tweak the settings until they are to your satisfaction. Remember to set the opacity to 30% or less; you can see the settings I used to the right. After getting the shadow just right you might want to set a guide to the middle of the original shape: that will become handy in Step 5.

Step 4: Divorce the shadow from the shape

We have to work directly on the shadow; PhotoShop won’t let us do that with it still applied as an effect. Right-click on the effect and choose Create Layer. This will separate the shadow out as a new layer. (PhotoShop will protest that some aspects of the effect can’t be reproduced in the new layer. You can ignore the warning; just press OK. Nothing about the shadow will change.)

Step 5. Curve half the shadow

We’re only interested in the very bottom edge of the shadow on the left hand side. Turn off the shape and the background layer and select a little less than half the shadow’s width with the rectangular marquee tool.

Right click on the selection and choose Layer Via Copy. Turn off the layer underneath, and then choose Edit / Transform / Warp from the menu.

Use the control points to warp the shadow into an appropriate curve. The right wide of the shadow should be higher than the left.  You might want to start with the “rise” preset, then customize the curve to something like the result shown on the left. Accept the changes by clicking the tick icon at the top of PhotoShop’s menu bar.

(You could choose to curve the both sides of the shadow and export its entire width if you were developing a fixed-width design in your web page).

Step 6: Export the shadow

Select the result and export it as a 24-bit PNG with transparency. The addition of transparency, in the form of an alpha mask, will allow the shadow to be used against any background color on your web page.

Step 7: Apply the shadow

Use CSS to apply the shadow to your web page elements

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.