Warping Drop Shadows to Give Depth

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.

Before any shadows

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.

Fill selection with black

With the black rectangle layer selection go to Filter>Gaussian Blur and set the radius to 6 pixels.

Blurring the Shadow

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.

Warp grid in action

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!

A warped drop shadow

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!

Posted Friday, June 18th, 2010 · Back to Top

SPONSOR

Add Comment

47 Comments 5 Mentions

  1. Chris Collins Author Editor

    Delightful.

    ·

  2. Robert van Hoesel Author Editor

    Nice and fast tip, didn’t think of solving this way..

    ·

  3. Design Informer Author Editor

    Nice tip! Great for beginners. :)

    I’ve been using this technique for years!

    ·

  4. Mark Stoecker Author Editor

    Great effect! I like. Subtle and simple to make, yet powerful.

    ·

  5. Web Risorsa Author Editor

    Nice explanation for starters.

    ·

  6. Richie Author Editor

    Is such a warped shadow effect possible using CSS3?

    ·

  7. Gareth Author Editor

    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.

    ·

  8. Anupum Author Editor

    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

    ·

  9. Daniel S Author Editor

    Transparent Shadows ARE possible with CSS using the rgba() keyword (not supported in all browsers). Just for info.

    Greetings from Germany,
    Daniel

    ·

  10. Jerome Gravel-Niquet Author Editor

    I did it with CSS3 and I blogged about it: http://jgn.heroku.com/2010/06/19/warping-drop-shadows-with-css3/

    ·

  11. Walter Earnshaw Author Editor

    Good tut, but for those with a lack of money to buy PhotoShop,
    could this ‘other’ paint program produce a similar effect?

    ·

  12. gitr Author Editor

    @Walter: I think it can be done with GIMP too
    http://www.gimp.org/

    A version for windows is available too.
    Cheers.

    ·

  13. Ilie Ciorba Author Editor

    Looks really nice, like a sheet of paper on the table, thank you!

    ·

  14. dmANDERSON Author Editor

    That is definitely a nice way of adding depth. Bravo.

    ·

  15. Stefan Rynkowski Author Editor

    Good tut. In my opinion it works very well with a semi-transparent white to gray(silver) overlay. Very quick tip congrats !

    ·

  16. Boba Author Editor

    Awesome effect, thanks Zach.

    ·

  17. Zach Dunn Author Editor

    @Jerome

    Hats off to you sir. That’s very well done.

    ·

  18. Ardit Author Editor

    So simple, love it

    ·

  19. Michael Szczepanski Author Editor

    This is a much easier way. Thanks!

    ·

  20. habieb Author Editor

    super duper simple, great tutorial for beginner

    ·

  21. Fyn Author Editor

    nicely done!
    helped me and looks good :)

    ·

  22. Max Luzuriaga Author Editor

    Really nice! If only there was a way to do this using CSS3…

    ·

  23. Jwaldeck Author Editor

    @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.

    ·

  24. Peter-Paul Rijsdijk Author Editor

    Nice tutorial, very helpfull

    ·

  25. subeesh Author Editor

    verry nice

    ·

  26. subeesh Author Editor

    verry nice and fentyastic

    ·

  27. ectopmall Author Editor

    Back in March, we introduced wholesale nfl jerseysyou to the Nike 78 project.

    ·

  28. Jeremy Author Editor

    Brilliant little tutorial! Takes 10 seconds and gives big pay-off in design.

    @Anupum – I actually agree. Tried this and it does seem a bit more ‘natural’. Thanks for the tip.

    ·

  29. Mike Author Editor

    I tried it both ways, the straight tutorial, and Anupum’s variation, and they’re both very useful. Best when it’s subtle…

    ·

  30. amanda Author Editor

    you are amazing! I have been trying to figure out how to do this forever. Never knew what to search for and stumbled across this when searching for alternatives to drop shadows. Thanks so much for sharing!!

    ·

  31. Hiren Khambhayta Author Editor

    Excellent, was searching for the same.

    ·

  32. Tom Durkin Author Editor

    Wanted to know how to do this for a LONG time and finally found this,

    Thank you so much, awesome tutorial, nice and simple to follow

    Tom

    ·

  33. Ivor Author Editor

    Actually CSS3 can do it ;) – http://jgn.heroku.com/2010/06/19/warping-drop-shadows-with-css3/

    ·

    • Zach Dunn Author Editor

      This tutorial was a lesson in why I’ve learned to never say “impossible” regarding web technologies. Thanks for the link!

      ·

  34. CraigSnedeker Author Editor

    It’s possible in CSS3 :) I’ve done it before (not sure if anyone else posted this)

    http://igeekygirl.com/css3/

    ·

  35. CraigSnedeker Author Editor

    Opps reading the comments I can see other people already got to the point (Darn why can I never be the first? Haha!) Sorry about that.

    Nice tutorial though!!

    ·

  36. Simon Facciol Author Editor

    Thanks for this simple tutorial and for the CSS3 method :)

    ·

  37. lounis Author Editor

    very nice, thanks verry much =)

    ·

  38. mattnguyenn Author Editor

    wow, i always wanted to know a easy way. thanks!

    ·

  39. Tim Author Editor

    I would recommend adding some shading to the corners of the “paper” itself. Just putting a warped shadow below a flat white square does not give the impression that the flat square is curved, but rather that there is a curved shadow for no real reason. I’ve seen this effect on too many sites now and it is becoming like lens flare to me.

    ·

  40. Shabu Author Editor

    Coolll.. Love it

    ·

  41. Vipul Anand Author Editor

    Amazingly CSS does page lifted effect with drop shadow quite effortlessly take a look at this here

    http://anandvip.blogspot.in/2012/01/css-drop-shadows-without-images.html

    ·

  42. sachin Author Editor

    thanks
    nice and simple trick
    i expected it would be a big job.
    thanks

    ·

  43. sina Author Editor

    wowwwww!
    u don’t know how much i need this tutorial!!!
    tanx bro!

    ·

  44. hrishikesh Author Editor

    Thanks for this tut.
    It was really simple and stupid thing that I always love.
    Thanks

    ·

  45. caitlyn Author Editor

    thx guy ily ………….. xD

    ·

 

Build Internet by One Mighty Roar. Since 2008.