Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Images in drop shadow

How can I make a drop shadow from a jpg file?



8:44 pm on Jan 12, 2012 (gmt 0)

Hi Group.

I am trying to make a drop shadow from a specific img file sent to me.
Is that possible? If so, how.



4:24 pm on Jan 13, 2012 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Welcome aboard PhilTulips, the "easy way" is to use Photoshop layer effects. I like to go old school on it, has more control over the layer.

- In the Layers palette, double-click the layer to get it off the background layer.

- From the main menu select Image -> Canvas Size, Expand the size of the document to accommodate the shadow.

- From the main menu select Select -> Load Selection -> leave Layer 0 Transparency selected. You'll now see the marquis.

- From the upper right of the layers menu, select new layer. Drag Layer 1 below Layer 0.

- From the main menu, Select -> Modify -> Feather. Enter 4 pixels. You may want to redo this step until it's the right amount of feather.

- From the main menu select Edit -> Fill, use 100% Black.

- Using the nudge keys on your keyboard, < ^ >, nudge in the direction you want the shadow.

- In the layers menu, adjust the opacity of the shadow layer.

- From the main menu select Layers -> Flatten image to save as a jpg - Or - Merge Visible and save as a .png if you want the shadow transparent over other page objects.

An alternative way that can be re-used: Save the shadow layer only (delete photo layer) as a .png then use absolute positioning and CSS to apply the shadow to all objects on your site. This will be a little restrictive as the pics will be limited to the size of the shadow.


7:22 pm on Jan 13, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi there PhilTulips,

I would suggest that you use CSS3 box-shadow, which works in modern
browsers, and forget about it's non-rendering in old browsers.

Browser support:-

Here is an example...

<html lang="en">
<base href="http://www.coothead.co.uk/images/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>css3 box-shadow</title>

<style type="text/css">
body {
#gaze {
margin:30px auto;
box-shadow:#333 10px 10px 15px;


<img id="gaze" src="gaze.gif" alt="">


Further reading:-


Featured Threads

Hot Threads This Week

Hot Threads This Month