Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

5 Simple Tricks To Bring Light and Shadow Into Your Designs

There’s just no escaping light and shadow — it’s everywhere you look. Everything you see reflects light and casts some sort of shadow. Visually, light and shadow help us make sense of what we see and help us understand texture, dimension, and perspective. [Updated January/04/2017]

So, as we try to make our designs on the Web more natural, moving and intuitive, a good understanding of light and shadow is pretty important. Here are 5 ways to better use light and shadow to polish your page designs and make them stand out on the screen.

Further Reading on SmashingMag: Link

A Quick Anatomy Of Light And Shadow Link

In the simple diagram below, we can see that the light source is coming from the left. The highlight is where the light is strongest, and the shadows fall on the side furthest from the light source. The appearance of light and shadow tells us a lot about the surfaces and textures in the image.


But what does this have to do with Web design, you ask?

If you’re trying to design rich, tactile interfaces and websites, light and shadow are your friends. In the same way that many classic artists made their paintings jump off the canvas, you can use light to give your designs depth and visual interest. Let’s get into it.

1. Using A Light Source Link

Perhaps the most important part of working with lighting is knowing where the light(s) is coming from. The light source will most likely determine where the highlights and shadows fall (although with Web design you can afford to bend these rules in places). If you’re working in Photoshop, you can use the “global light” effect so that all of your lighting effects follow the same light direction.

Controlling the source(s) of light in your designs (even if just with a linear or radial gradient) can help create atmosphere in your page designs. It can also help direct the eyes to a focal point in the design.

Examples on the Web Link

IKEA Get Growing!5 by Jason Zigrino


Dribbble shots UI6 by Worawaluns


2. Gradients Link

In the real world, very few things have a flat tone. Light and shade are on everything. Subtly using gradients is a great way to provide depth and makes things come to life on the screen.

The key with gradients is not to overdo them. If you’re using Photoshop, make use of layer styles for your gradients. This gives you the freedom to edit them at any point; it also means that if you resize the element, the gradient will rescale too.


Examples on the Web Link

This Book Store Website7 by Dwinawan is a lesson in subtle yet effective use of gradients to separate and organize content.


Music web application8 by Juraj Molnár


3. Highlights Link

Highlights can help balance shadows and should be used on the edges of objects closest to the light source. Highlights are often overlooked because when used effectively, you don’t even notice they’re there. And while not suited to every situation, a tiny highlight can make all the difference in polishing an interface. The “sharper” the highlight, the shinier the surface will appear.

To really appreciate highlights, we need to zoom in a bit close. A good trick for adding highlights is to work at 200% or more, because at 100% it can be hard to see what you’re doing clearly.

Examples on the Web Link

Icon Dock and Newism both used a semi-transparent white line on the page element’s top edge to give it a highlight. It’s barely noticeable but adds a bucket of polish to the design.

4. Basic Shadows Link

Like gradients, drop-shadows have become a staple of most Web designers. Shadows can really add visual depth and texture when used the right way. The key is not to overdo it.

The qualities of a shadow depend on the light direction and intensity, as well as the distance between the object and the surface where the shadow is cast. The stronger the light, the darker and sharper the shadow. The softer the light, the softer the shadow.


Examples on the Web Link

When it comes to online examples of drop-shadows, there are simply too many websites to choose from. When used cleverly, they can add a touch of dimension to even the most minimal design.

Nike Product Page9 by Ilja Miskov


5. Advanced Shadows Link

You can do a lot beyond basic drop-shadows to give elements a third dimension. Longer shadows are a great way to change the spatial relationship between objects on a page.

In the examples below, the same Coke can is given completely different positions in space depending on its shading and shadow.

Examples on the Web Link

Emotions by Mike10 cleverly uses shadow (and light) to turn the flat page into a floor.


Further Resources Link

Area for further articles and related resources.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19

↑ Back to top Tweet itShare on Facebook

Rob Morris is an Australian designer based in Japan. He freelances for clients all over the world under the moniker Digitalmash. You can follow his adventures on Twitter.

  1. 1


  2. 2

    Simple yet so powerful. Love the one pixel lines and very subtle gradients.

  3. 3

    Very useful references, I’ll use them soon!!!

  4. 4

    brilliant, have been looking for something to kick start my understanding of this.
    thanks alot

  5. 5

    thanks so much

  6. 6

    Lukasz Bachur

    April 20, 2009 2:48 pm

    Very nice and helpful – these tricks are simple and effective. BTW: design of Mike Precious is lovely!

  7. 7

    Simon Harlinghausen

    April 20, 2009 3:07 pm

    Sweet. I really like shadows and 3D effects
    at websites. Especially to push informationen
    and build levels.

  8. 8

    Great examples and tips!

  9. 9

    Great job!

    thanks for bringing some light into the shadow.

  10. 10

    Any way you could give tutorials on these specific effects? I see the related links but would be awesome to see how these examples were specifically created

  11. 11

    Very nice article

  12. 12


    April 20, 2009 4:18 pm

    Wicked tut. Great for inspiration. I would argue on one point: Google has a pretty harsh shadow that is only justified by the awesome-ness that is Google. That and does anyone really use their homepage?

  13. 13

    I agree, Google’s shadow is pretty bad, not to mention their logo. It’s established now, but no one would argue that either their logo or shadow are any good… Maybe it’s just me though?

  14. 14

    very very well.

  15. 15

    Matthias Maier

    April 20, 2009 5:52 pm

    Great post! I love the power of shadows and especially gradients in web design.

    • 16

      rejane b. asignacion

      February 14, 2011 12:57 am

      that’s true my friend it was so amazing,so powerful and beautiful..I really like it so much

  16. 17

    Rafael Braga

    April 20, 2009 6:21 pm

    Just Great.

  17. 18

    Brandon Buttars

    April 20, 2009 7:09 pm

    Awesome. This is a great tutorial. I think sometimes I’m lazy with my shadows and gradients and make them look a little bit unnatural. Thanks for the insight and tutorial.

  18. 19

    perfect good article

    This helps to improve the some of most common error which every designer makes.

  19. 20

    well done, great work but for me still it is difficult to perform.

  20. 21

    Angela Garcia

    April 20, 2009 9:32 pm

    Simply love it!

  21. 22

    Great stuff. You said all the things I wanted off my chest for other designers.

  22. 23

    cool article………

  23. 24

    10x a lot, very usefull :)

  24. 25

    Oh God,
    At last i got it………..The big problem with me, and i think with every designer is the concept of light+shadow. This article will help a lot in learning this concept.

    Thanks, Great post

  25. 26

    Illuminating !

  26. 27

    I agree with earthwormjim. The folks over at google have´nt got a clue when it comes to design. I wonder how they have been able to established all that they have with such poor design and midrange usability. That could actually be a good article, why google have success?

  27. 28

    Very nice article!! Very usefull also!
    Just makes me want to experience with shadows!!
    Grtzz, Lin

  28. 29

    thank you so much for your everyday education. its perfect!

  29. 30

    most useful article on smashing magazine in a long time !! – especially loved the coke can example.

  30. 31

    i’ll print this one..gracias!

  31. 32

    simply awesome…!!!!

  32. 33

    Really nice article! You should think about getting a “print” function for these things!

  33. 34

    excellent! shadows are oftenly used in horrible ways!!

  34. 35

    Web design is all about sweating the details and this article shows you how to do it. Nice work!

  35. 36

    Very nice. Shadows can be abused but the examples are very good.

  36. 37

    Great article this one. Especially like the 1px highlights, just can’t get enough at the moment!
    Nice one RM.

  37. 38

    Brilliant article.

  38. 39

    Another useful post. Thanks a lot, I love these details!

  39. 40

    amazing. thanks

  40. 41

    Very Nice Article…… Thx Man…

  41. 42


  42. 43

    It all boils down to correct use of gradients, contrast and composition. Many of these posts can be summed up in one universal post with universal guidelines that all professional design build on, but that wouldn’t b much fun now, would it? :3

  43. 44


  44. 45

    Shouldn’t the title read – “5 examples of websites that bring light and shadow into their designs”?

    If you can link to specific tutorials to achieve these examples then you can use the current title.

    Smashing Magazine is turning into the equivalent of today’s journalism. Lazy, regurgitated and available earlier.

  45. 46

    Great job! As always interesting!

  46. 47

    Rob Morris (@digitalmash)

    April 21, 2009 1:37 am


    I think that’s a bit harsh. I wrote the article so that people could keep these things in mind when they design. There is actually text amongst the examples which I think is useful.

    There are links to tutorials at the end of the article which get into specifics, but at the end of the day it’s about a broader understanding than simply providing verbatim step by steps.


  47. 48

    Very nice reminder about light, gradients and polish.

    Btw, I saw “EMOTIONS By Mike” website for the first time a couple a years ago, and I still believe it’s one of the best designs out there.
    It inspired me then. And still does.

  48. 49

    very good article. very well documented. congrats!

  49. 50

    Jan Schultink

    April 21, 2009 2:59 am

    Very useful, also in PowerPoint

  50. 51

    Very nice article and great examples easy to understand^^
    I think that it will help me in the design of my next projects! Thank you!

  51. 52

    sama creation

    April 21, 2009 3:11 am

    brilliant Very nice and helpful

  52. 53

    One Word. Brilliant.

  53. 54

    Some nice examples, thank you!

  54. 55

    Some really nice examples!

  55. 56

    Quality post, this is exactly the sort of thing I need to work on

  56. 57

    Malte Hansen

    April 21, 2009 4:04 am

    Awesome! :)

  57. 58

    Tom Bradshaw

    April 21, 2009 4:05 am

    I always use light and shadow in my work, it brings it to life, makes it feel real. Some really nice examples as well.

  58. 59

    Great examples! Thanks for sharing…

  59. 60

    Creating lovely lighting effects in Photoshop is one thing, but then translating these to accessible, valid and unbloated XHTML and CSS is the tricky part. Maybe a follow up post might be useful that outlines the best techniques for doing just that. I’m thinking of sliding doors, elastic content boxes, rounded corners + gradients, efficient use of divs with background images, etc.

  60. 61

    saurabh shah

    April 21, 2009 5:09 am

    nice article …

  61. 62

    Søren Larsen Pedersen

    April 21, 2009 5:17 am

    Wow, its great!

  62. 63

    love it! power to the drop shadow…!

  63. 64

    heather van de mark

    April 21, 2009 5:43 am

    thanks for posting a unique and incredibly helpful guide!!!

  64. 65

    These are good examples, but as a novice Photoshop designer it would be nice if you could show us HOW to create these effects! From the title of this post that was what I was expecting :(

  65. 66

    Zuquirio Ámaur

    April 21, 2009 6:35 am

    Great article, love it! I will put these tips in practie in my new web site design. Thanks.

  66. 67

    Jan Kovařík

    April 21, 2009 6:53 am

    simple and very useful, thanks

  67. 68

    Hey, the screen capture image you are using for the Superkix example above is the same image you are using for the Sofa example below it…

  68. 69

    This one is interesting : ) Thank you for sharing!

  69. 70

    Rim light. Where’s your rim light.

  70. 71

    pretty enLIGHTening article! sorry i just had to…

  71. 72

    Great stuff Rob, fantastic examples. Lovely read.

  72. 73

    Great tricks
    we should as adobe change the default drop shadow values. Worst setting never used it.

  73. 74

    Bonito y poderoso

  74. 75

    :)) goooooooooood !

  75. 76

    This is a great article! In the section of highlights, there is a great example of how Apple uses highlights to create recessed text. I’ve always had trouble with this. Does anyone know of a good tutorial on creating this effect? I don’t know if everything is done by hand or if there are Photoshop methods for creating this. Any help?

  76. 77

    There were some pretty cool examples. Thanks.

  77. 78

    I found this article a great place to discover some cool sites like icebrrg and css ninja’s. Bonus! Thanks!

  78. 79


    April 21, 2009 1:29 pm

    nice post! In addition to “4. Basic Shadow” (1st example), I often also add a subtle light (mostly white) stroke of 1px

  79. 80

    Que legal! Valiosas dicas, muito poderosas!

  80. 81

    This absolutely useful for anyone who gives attention to detail. Thanx a lot.

  81. 82

    Florian Dellé

    April 21, 2009 11:26 pm

    Articles like these establish my excellent impression about Smashing Magazine!

    Brilliantly written. Thanks a lot.

  82. 83

    Awesome list…great info…thanks

  83. 84

    Great!! thanks

  84. 85

    Danish Refai

    April 22, 2009 1:31 am

    Awesome !!! Great Work !!!
    Still Smashing It !

  85. 86


  86. 87

    Quakeulf >:3

    April 22, 2009 3:20 am

    nice ..two

  87. 88

    Kedhar Vishwanath R.R

    April 22, 2009 8:08 am

    Simply superb, you guys rock. Your articles are crisp and clean. Thanks a lot, great work guys. Keep it up :-)

  88. 89


  89. 90

    Prashant Poladia

    April 22, 2009 10:39 am

    Very useful article on shadows. It is really an important factor to keep in mind. Thanks SM.

  90. 91

    Nice, but this web 2.0 crap is gag worthy sometimes.

  91. 92

    Brilliant. It’s the little touches that separate great designs from good and the points you mention should be talked about more often — small things that make a big difference. Great article Rob.

  92. 93

    Great tips! Really interesting uses of lighting/shadow.

  93. 94

    Line of Design

    April 23, 2009 12:02 am

    Great article. It really put some things into perspective for me. :)
    I’m currently training my 3D undertanding in Graphic Design for print at the moment. This article also helps with that – cross media :)

  94. 95

    Great info and examples – thanks for posting!

  95. 96

    Nice directions.

  96. 97

    I am 3 weeks into my stank chode experiment where I began by running 10 miles through the louisiana backwoods, then put on a pair of water tight underwear which sealed in the moisture and bacteria. My experiment will conclude on week four, when I will remove said underwear and expose my posterior to my doctor for my first rectally administered prostate exam. Stand by for results.

  97. 98

    Roberto Otero

    May 10, 2009 11:00 am

    Thank’s, really very usefull. I’ll try to use it. Again, thank you very much.

  98. 99

    Hmm… Really a neat collection.
    Very useful for web designers like me. :)

  99. 100

    Excellent article. Very helpful. Thanks!

  100. 101

    nice one! thanks for sharing! awesome!

  101. 102

    rejane b. asignacion

    February 14, 2011 12:59 am

    it really help me in my project about light and shadow

  102. 103

    Wonderful and unvaluable tips. Thank you so much.


↑ Back to top