# How can I create these modern shadow effects?

**URL:** <https://forum.kirupa.com/t/how-can-i-create-these-modern-shadow-effects/240201>\
**Category:** design\
**Created:** [September 30, 2007, 8:50pm UTC](https://forum.kirupa.com/t/how-can-i-create-these-modern-shadow-effects/240201 "2007-09-30T20:50:03Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Web\_Stylist](https://avatars.discourse-cdn.com/v4/letter/w/7c8e57/32.png) [@Web\_Stylist](https://forum.kirupa.com/u/Web_Stylist)\
**Post date:** [September 30, 2007, 8:50pm UTC](https://forum.kirupa.com/t/how-can-i-create-these-modern-shadow-effects/240201/1 "2007-09-30T20:50:03Z")

</div>

I’m seeing an increasing trend in web designers using this kind of fading shadow technique to separate the difference sections of the layout as shown below. Are there currently any tutorials out there that demonstrate how to achieve this kind of effect? I know it seems flabbergastingly simple, but I can’t seem to achieve the desired effect:

![](http://www.imgsync.com/data/img/3252958shadow%20copy.png)