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.

Advertising
  1. 1

    Chris Morledge

    May 7, 2009 2:34 pm

    Nice examples, I have been trying to put lighting affects in my designs for a while now. This will give some good references.

    Cheers
    @morledge

    1
  2. 2

    Nice Showcase!! gives a good idea about respective trend !!

    DKumar M.
    @instantShift

    0
  3. 3

    These are great – thanks!

    0
  4. 4

    Klaye Morrison

    May 7, 2009 3:09 pm

    Damn, we’ll be releasing our site in the next couple of weeks and has some good lighting effects. Good list anyways!

    0
  5. 5

    I’m not going to deny the fact that some of these sites look amazing, but this style is getting very generic. Most of them look like they were designed by the same person.

    0
  6. 6

    Great examples. May I humbly throw my own site into the hat? http://iampariah.com

    0
  7. 7

    These techniques can also be used to modify basic templates to create something unique. Doing so will make your stock templates stand out from the rest.

    Great list, thanks … Scott
    @ScottProck

    0
  8. 8

    love this post

    0
  9. 9

    very inspiring for me! Thanks for the great post, love it!

    0
  10. 10

    Another nice lighting effect can be seen on okb – interactive studio okb – Interactive studio

    Nice list BTW

    0
  11. 11

    CodeArt Media

    May 7, 2009 4:23 pm

    Very nice showcase, glad to see trends finally moving away from too much over done grunge.

    0
  12. 12
  13. 13

    Very cool, another master of lighting effect – Paul Lee http://www.paulleedesign.com/

    0
  14. 14

    Nice examples, but didn’t you just do this post like two weeks ago?

    0
  15. 15

    this post is fantastic :)

    0
  16. 16

    Nice examples, i like this site http://macalicious.com/

    0
  17. 17

    thanks for showing some new stuff :)

    its not just the same sites as usual

    0
  18. 18

    Anyone have any good links to get started on creating something like this for a beginner?

    0
  19. 19

    Wayde Christie

    May 7, 2009 7:03 pm

    I’m not going to deny the fact that some of these sites look amazing, but this style is getting very generic. Most of them look like they were designed by the same person.

    @matt – I agree :) Link

    0
  20. 20

    Good collection, nice examples. Hype turning into a style to choose from, always nice:)

    0
  21. 21

    The site of http://newism.com.au/ is not compatible in IE 6. It will be great if the website using some js to solve the png prob.

    0
  22. 22

    Hmmm I don’t want to accuse anyone, but I remember that I saw this article some were else a few weeks ago…. wel whatever, It’s a good article

    0
  23. 23

    Same, I’ve seen this article before but I can’t put my finger on where. I get a really huge case of Deja vu reading this, but good stuff can’t be repeated enuff. :3

    0
  24. 24

    @matt – Also agreed :)

    0
  25. 25

    I like the work of Alex Buga, the best combination of CSS/Javascript. Thumbs up!

    0
  26. 26

    Your déja vu feeling refers to an article on Vandelay Design :
    http://vandelaydesign.com/blog/galleries/light-effects/

    IMO, I prefer this selection…

    @Nikkel

    0
  27. 27

    I like it, design trend of 2009. Thanks for sharing it. One suggestion to SM: Can you post a topic related to “Top 20 award winning designers in Web/Application/Identity design”.

    0
  28. 28

    I really like the trend of lighting effects. When used consistently and well it’s stunning.

    0
  29. 29

    Thanks for featuring us and for the great list!

    0
  30. 30

    all done by the same designer?

    0
  31. 31

    Nice, yes, Masterful? Hmmm… that’s a strong term

    0
  32. 32

    @Ian: I’d have to agree… some of these look excellent but most experienced designers would be able to recreate the majority of these effects.

    0
  33. 33

    Matěj Grabovský

    May 8, 2009 1:26 am

    Very nice, a lot of inspiration here. Good work collecting these.

    0
  34. 34

    wow great list! like the Icondock

    0
  35. 35

    Thanks for the feedback! Glad you like the article. I spent a good amount of time trying to find a long list of the best examples, and Smashing added a few to my list to share also. Glad it all paid off! Make sure you also read the How-To – “5 Simple Tricks To Bring Light and Shadow Into Your Designs” article that Smashing published a few weeks ago. http://bit.ly/DR3o2- I’s a great tutorial on how to create lighting effects in your design.

    0
  36. 36

    Cool selection, good lighting makes such a difference!

    0
  37. 37

    Kristin Andrews

    May 8, 2009 4:41 am

    Such a great article. Lighting in web design is something I’ve been seeing as a trend and have been trying to implement in my work. Thanks, Angela.

    0
  38. 38

    Beautiful collection. Thanks Smashing.

    0
  39. 39

    This is great advice for ANY design. Subtly! keep the spotlights soft, use blending modes or opacity slider, and keep the outer glow soft. It’s a nice.

    0
  40. 40

    Nils Rasmusson

    May 8, 2009 6:00 am

    Beautiful examples, SM. Just the kind of inspiration I could use. Thanks!

    0
  41. 41

    The post I have been waiting for.

    0
  42. 42

    Pretty sites, but a gradient fill is not a “lighting effect”. It just happens to be trendy.

    0
  43. 43

    Great post. Lighting adds a much needed dimension to flat web pages! I plan to reference this post on my blog.

    0
  44. 44

    good work and all. I’m just tired of seeing all the same sites.

    0
  45. 45

    45royal and newism need to be dropped, those graphics look hideously pixelated. The rest look awesome, great job to the designers… great host of colors, lighting and beautifully designed masterpieces!

    0
  46. 46

    Nice selection of work. I really Like Paul Lee’s work as well. +1

    0
  47. 47

    i love this style of web design. great article once again Angela!

    0
  48. 48

    Fällt dem Designer nichts mehr ein: ein Farbverlauf, dass muss es sein!

    .

    0
  49. 49

    Hey guys, great post, however does anyone know how to create these types of backgrounds? I assume they are using overlay and large brushes on Photoshop however I don’t know how they create them streaks in example: Search Inside Video, CampaignMonitor e.t.c

    If anyone knows of any sites that could help that would be great as the links on 5 Simple Tricks To Bring Light and Shadow Into Your Designs. are fairly basic.

    Thanks

    0
  50. 50

    Greatcreativelinks.com

    May 8, 2009 8:00 am

    Love the Mailchimp Website

    0

↑ Back to top