Warping Drop Shadows to Give Depth
Even though CSS3 has brought a lot to the table in regards to drop shadow effects, there are still plenty of reasons to use image alternatives. The drop shadows generated by CSS3 are relatively uniform, and don’t deviate much past size and transparency. In some cases, you might want to give a page some extra depth.
I ran into a similar situation in a recent client project, and decided to use a recent trend of warping drop shadows to help add some extra excitement to the page. You might have seen similar effects in other tutorials involving deleting a circular section, but this method will keep the edges from being too sharp. It also allows you to work with non-rectangular shapes because all points are editable in the warp tool’s grid.
Setting Up
Start a new Photoshop document. The size doesn’t matter because all of the elements will scale accordingly. I recommend changing the background color to something that will make a white box stand out, but not drown out a black shadow. We’ll use a light blue for the example. Draw up a white box and we’re ready to start on the shadow.
Add the Shadow
You might be tempted to use blending options right now. Resist the urge, because we’re aiming for something much more distinct.
Start by making a new layer that is positioned between the background and content box from the previous step. On the new layer, draw a rectangle selection that is just slightly smaller than the width of the content box. Fill this area with black.
With the black rectangle layer selection go to Filter>Gaussian Blur and set the radius to 6 pixels.
Love the Warp Tool
Photoshop’s warp tool is wildly underrated. It’s good for much more than messing around with celebrity faces or other random attempts to doctor photos. It’s particular good at taking specific shapes and molding them into another shape without ruining the appearance. This point is exactly why we’ll use it to shape our new drop shadow.
With the shadow layer selected, head to Edit>Transform>Warp to bring up the warping grid. Use the handles on this control to give a curvature to the blurred rectangle. Feel free to shift the layer around to get the best positioning.
Once the shape is set, simply lower the layer’s opacity down to about 15% and you’ve got a finished shadow that simulates a subtle page curl. Nice work!
Wrapping Up
There you have it, a drop shadow that gives content areas a feeling of “coming off the page” depth. As you might have guessed by now, this is a perfect footer background for content areas throughout the page. Not bad!
Discussion
June 18th, 2010 at 3:04 PM
Delightful.
June 18th, 2010 at 6:36 PM
Nice and fast tip, didn’t think of solving this way..
June 18th, 2010 at 6:46 PM
Nice tip! Great for beginners. :)
I’ve been using this technique for years!
June 19th, 2010 at 2:49 AM
Great effect! I like. Subtle and simple to make, yet powerful.
June 19th, 2010 at 6:07 AM
Nice explanation for starters.
June 19th, 2010 at 11:18 AM
Is such a warped shadow effect possible using CSS3?
June 19th, 2010 at 11:31 AM
I’ve not tried it, but I think you could probably simulate the effect in CSS3 with rounded corners, inset box shadow and a negative top margin on a div (or some other element) below the element to be shadowed.
June 19th, 2010 at 11:52 AM
hey if you use photoshop CS2 or above this is a nice way.
1. Use the drop shadows in blending options
2. then in the layer right click on the fx (beside the layer name and thumbnail)
3. click on create layers
By doing this the shadow and object layers get separated
4. Now you can warp the shadow
you get warped shadows easily and more realistic :)
*just an add
great tutorial buddy
June 19th, 2010 at 12:43 PM
Transparent Shadows ARE possible with CSS using the rgba() keyword (not supported in all browsers). Just for info.
Greetings from Germany,
Daniel
June 19th, 2010 at 1:05 PM
I did it with CSS3 and I blogged about it: http://jgn.heroku.com/2010/06/19/warping-drop-shadows-with-css3/
June 19th, 2010 at 2:29 PM
Good tut, but for those with a lack of money to buy PhotoShop,
could this ‘other’ paint program produce a similar effect?
June 20th, 2010 at 6:24 AM
@Walter: I think it can be done with GIMP too
http://www.gimp.org/
A version for windows is available too.
Cheers.
June 20th, 2010 at 6:01 PM
Looks really nice, like a sheet of paper on the table, thank you!
June 20th, 2010 at 11:11 PM
That is definitely a nice way of adding depth. Bravo.
June 21st, 2010 at 2:48 AM
Good tut. In my opinion it works very well with a semi-transparent white to gray(silver) overlay. Very quick tip congrats !
June 21st, 2010 at 10:42 AM
Awesome effect, thanks Zach.
June 21st, 2010 at 12:13 PM
@Jerome
Hats off to you sir. That’s very well done.
June 23rd, 2010 at 1:26 AM
So simple, love it
June 23rd, 2010 at 11:44 AM
This is a much easier way. Thanks!
July 11th, 2010 at 2:20 PM
super duper simple, great tutorial for beginner
July 14th, 2010 at 12:04 PM
nicely done!
helped me and looks good :)
July 22nd, 2010 at 10:56 AM
Really nice! If only there was a way to do this using CSS3…
July 28th, 2010 at 12:51 PM
@Max, @Jerome posted this awesome link http://jgn.heroku.com/2010/06/19/warping-drop-shadows-with-css3/ on how to achieve that with CSS3.
August 18th, 2010 at 9:57 AM
Nice tutorial, very helpfull
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.