35 Examples Of Masterful Lighting Effects In Web Design

Advertisement

Using a light source the right way can add dimension and beauty to a website design. Strong light sources create a stark contrast between light areas and shadows in a design, making the elements look more realistic and dimensional and less flat. Some websites opt instead for a dim light source to create a soft glow around particular areas of the website, to attract the eye more subtly.

Lighting can also create a mood for a website. Some websites use bright swirls of light to show energy, while others use a dim glow to create a peaceful mood. In the examples below, you will see a wide range of lighting effects used, from subtle lighting effects to bold rays of light streaking across the page.

You can learn how to better use light and shadow to polish your page designs and make them stand out on the screen in our recent article 5 Simple Tricks To Bring Light and Shadow Into Your Designs1.

Masterful Lighting Effects In Web Design

45royale2

45royale.com3

Newism4

newism.com.au5

TaoEffect6

Screenshot7

McCafe8

Screenshot9

Postbox Inc.10

Screenshot11

Weloveicons.com12

Screenshot13

31 Three14

31three.com15

Icondock16

Screenshot17

Mailchimp18

Screenshot19

for a beautiful web20

Screenshot21

CampaignMonitor22

campaignmonitor.com23

Crush + Lovely24

crushlovely.com25

Camp Creative Group26

campcreativegroup.com27

Design moves me28

designmovesme.com29

ditley30

ditley.com31

artificial studio32

artificialstudio.com33

Revive Africa34

Screenshot35

Lisa Moseley36

Screenshot37

WebKitbits38

Screenshot39

rareview40

Screenshot41

Your Web Job42

Screenshot43

Strutta44

Screenshot45

Drew Wilson46

drewwilson.com47

envato48

envato.com49

icebrrg50

icebrrg.com51

Revyver Labs52

labs.revyver.com.com53

Mike Precious54

mikeprecious.com55

nekob56

nekob.com57

nitobi58

nitobi.com59

Search Inside Video60

searchinsidevideo.com61

Monterey62

seemonterey.com63

Tutorial964

tutorial9.net65

GoodBytes66

goodbytes.be67

foehn68

foehn.co.uk69

Alex Buga70

alexbuga.com71

youLOVE.us72

youlove.us73

avalonstar74

avalonstar.com75

Viget Labs76

viget.com77

Barack Obama78

barackobama.com79

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/04/20/5-simple-tricks-to-bring-light-and-shadow-into-your-designs/
  2. 2 http://www.45royale.com
  3. 3 http://www.45royale.com
  4. 4 http://newism.com.au
  5. 5 http://newism.com.au
  6. 6 http://www.taoeffect.com/
  7. 7 http://www.taoeffect.com/
  8. 8 http://wakeuptowhatsnew.com/
  9. 9 http://wakeuptowhatsnew.com/
  10. 10 http://www.postbox-inc.com/
  11. 11 http://www.postbox-inc.com/
  12. 12 http://weloveicons.com/
  13. 13 http://weloveicons.com/
  14. 14 http://www.31three.com
  15. 15 http://www.31three.com
  16. 16 http://icondock.com/
  17. 17 http://icondock.com/
  18. 18 http://www.mailchimp.com/
  19. 19 http://www.mailchimp.com/
  20. 20 http://forabeautifulweb.com/
  21. 21 http://forabeautifulweb.com/
  22. 22 http://www.campaignmonitor.com
  23. 23 http://www.campaignmonitor.com
  24. 24 http://www.crushlovely.com
  25. 25 http://www.crushlovely.com
  26. 26 http://www.campcreativegroup.com
  27. 27 http://www.campcreativegroup.com
  28. 28 http://www.designmovesme.com
  29. 29 http://www.designmovesme.com
  30. 30 http://www.ditley.com
  31. 31 http://www.ditley.com
  32. 32 http://www.artificialstudio.com
  33. 33 http://www.artificialstudio.com
  34. 34 http://reviveafrica.com/
  35. 35 http://reviveafrica.com/
  36. 36 http://lisamoseley.com/
  37. 37 http://lisamoseley.com/
  38. 38 http://www.webkitbits.com/
  39. 39 http://www.webkitbits.com/
  40. 40 http://www.rareview.com/
  41. 41 http://www.rareview.com/
  42. 42 http://yourwebjob.com/
  43. 43 http://yourwebjob.com/
  44. 44 http://www.strutta.com/
  45. 45 http://www.strutta.com/
  46. 46 http://www.drewwilson.com
  47. 47 http://www.drewwilson.com
  48. 48 http://www.envato.com
  49. 49 http://www.envato.com
  50. 50 http://www.icebrrg.com
  51. 51 http://www.icebrrg.com
  52. 52 http://labs.revyver.com
  53. 53 http://labs.revyver.com
  54. 54 http://www.mikeprecious.com
  55. 55 http://www.mikeprecious.com
  56. 56 http://www.nekob.com
  57. 57 http://www.nekob.com
  58. 58 http://www.nitobi.com
  59. 59 http://www.nitobi.com
  60. 60 http://www.searchinsidevideo.com
  61. 61 http://www.searchinsidevideo.com
  62. 62 http://www.seemonterey.com
  63. 63 http://www.seemonterey.com
  64. 64 http://www.tutorial9.net
  65. 65 http://www.tutorial9.net
  66. 66 http://www.goodbytes.be
  67. 67 http://www.goodbytes.be
  68. 68 http://www.foehn.co.uk
  69. 69 http://www.foehn.co.uk
  70. 70 http://www.alexbuga.com
  71. 71 http://www.alexbuga.com
  72. 72 http://www.youlove.us
  73. 73 http://www.youlove.us
  74. 74 http://www.avalonstar.com
  75. 75 http://www.avalonstar.com
  76. 76 http://www.viget.com
  77. 77 http://www.viget.com
  78. 78 http://www.barackobama.com
  79. 79 http://www.barackobama.com

↑ Back to top Tweet itShare on Facebook

Angela Rohner is founder of the Flash and CSS design gallery TheBestDesigns.com, which she started in 2001. She currently works as an Art Director and Front-End Developer in Dallas, TX. To get in touch with Angela, you can find her on Twitter, or you can visit her website.

Advertisement
  1. 1

    Great article!!! I am using it all the time.

    Hello from Chicago web designer.

    0
  2. 102

    These are brilliant. Inspiring.

    0
  3. 203

    right light should be place in the right place

    0
  4. 304

    It is amazing how simple lighting can bring forth such strong presence. Web design firms have to balance creativity with subtle techniques to really make the design pop and flow at the same time.

    0
  5. 405

    Excellent post. I like the template my guy used, simple and it has been really effective. ken-cooper-dc.com/

    0

↑ Back to top