Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

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. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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.

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.

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

Campaign Monitor1 use a burst of light rays that conveys the feeling of a sunrise behind the design.


Icebrrg3 use light to submerge its website deep underwater.


Mike Precious5 uses more than one light source to add visual interest and to tie in with the desk-lamp lighting style.


Deaxon7 use a subtle light source behind its logo to give the logo visual prominence on the page.


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

nclud’s website9 is a lesson in subtle yet effective use of gradients to separate and organize content.


CSS Ninjas11 appears to use flat colors at first glance, but each colored area has a subtle gradient, which gives it texture.


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 Dock13 and Newism14 both use 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.



You’ve probably seen Apple’s website17 already. However, you may not have noticed the lovely highlights at the bottom of the navigation items, which help make the words look recessed.


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.

LinkedIn19 adds a very subtle shadow to the bottom of its sidebar elements to create the illusion of depth.


Google21 — with perhaps the hardest-working page on the Internet — still invests in the subtle use of shadow for its search page.


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 Mike23 cleverly uses shadow (and light) to turn the flat page into a floor.


Superkix25 uses shadow to float sneakers “above” the website. The shadow moves when you resize the page, as if the light were shifting.


Sofa27 creates a floor on the white background with great use of both light and shadow.


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
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ 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!


↑ Back to top