homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

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)

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)

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:-


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved