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)

↑ Back to topShare on Twitter

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.

  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
  51. 51

    As for comment 45… I think the ‘pixelated’ in Newism and 45Royale effect has been designed on purpose. I like it..

    0
  52. 52

    Siouxie Boshoff

    May 8, 2009 8:45 am

    These are some great examples. Some of them are simply stunning. Thanks for sharing. This will make a great resource for inspiration.

    0
  53. 53

    Wow these are awesome!! Would have been great to see a few months ago, just added a bit of lighting effects to the newly launched http://www.stayvalid.com – But these would have been great inspiration to take it to that next level, thanks!!

    0
  54. 54

    Awesome! Thanks for posting one of my sites, it’s my first design to get on Smashing!

    I made the ‘Ditley’ site.

    You can see more of my work here: Loukotka Design

    I’m impressed with a lot of the other work as well.

    0
  55. 55

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

    Exactly. How about a self-imposed limit? Why don’t you vow to stop repeating the same examples by only publishing the same site every three months? Is that too much to ask? I’m finding Smashing Magazine less and less interesting b/c it’s the same thing over and over. Thanks, guys!

    0
  56. 56

    Dennis van Lith

    May 8, 2009 11:34 am

    Something else with particles of light…
    http://le-marquis.nelhost.com/

    0
  57. 57

    Some very cool looking sites. What do you think of the lighting in this one? http://www.frogisis.com/

    0
  58. 58

    Lighting is nice, but I’m already very tired of seeing those colored lens flare circles floating around everywhere! They are like so many design fads – they look good when one person uses them, so then everyone starts using them. Ugh.

    0
  59. 59

    I like some of these; but everything is starting to look the same.

    The internet is dying anyway, at least the WWW, stop designing it lol.

    0
  60. 60

    Good collection, nice examples.thanks…

    0
  61. 61

    This was actually wildly inspirational. Nice job finding sites that haven’t been circulated hundreds of times already. Great work!

    0
  62. 62

    Really nice!

    0
  63. 63

    Nice group of examples. How about publishing a “How To” guide with step by step instructions on how to create these types of effects?

    0
  64. 64

    Very nice! The earlier comment that most designers could recreate the effects is missing the point. These examples illustrate how to draw attention to a certain area of the page without hitting the user over the head. Subtle is good. And timeless.

    0
  65. 65

    GOOD DESIGN!
    I like it very much…..

    0
  66. 66

    Man, I love Smashing, but please come up with some better ideas. Even if you are going to use these lame ideas please use better examples. Some of these were good, but most were not great. I’ve noticed that smashing takes almost every single logo that they post as “new” and “exciting” from logopond.com. DO SOME RESEARCH and find some truly inspiring and creative material…PLEASE!

    The “Vidget” example has no light source whatsoever yet it is posted here. If it really was a good example then I would really hate to see a bad one. Come on that Vidget site didn’t have one shadow on it! How can there be a distinct light source and not even one shadow? Maybe the writer of this article is playing a favorite card, whom knows?

    I’m not trying to bash here, I LOVE SMASHING and would defend it against any other site of its kind. But please quit throwing things up here just because you think no one would ever know the difference….

    0
  67. 67

    Carlos Leopoldo

    May 8, 2009 7:06 pm

    Amazing effects, personally I think that lighting effects are necesary to give life to a unanimated website

    0
  68. 68

    nzdesignagirl

    May 8, 2009 7:38 pm

    http://www.orcon.net.nz i like the lighting behind the logo….

    0
  69. 69

    Smashing People!!! Please stop repeating the same websites in your every next post!!

    0
  70. 70

    what an awesome compilation! they were all awesome! *love*love*

    0
  71. 71

    It’s almost always the same web sites, I love smashing magazine but I have to say this showcase was very very poor

    0
  72. 72

    I appreciate all the feedback!

    @Guy, I’m sorry you didn’t like most of the examples. When I was preparing this, I wanted to give examples of both bold lighting and subtle lighting (as explained in the intro). There is a faint glow behind the Viget logo from a radial light source in the background of the header. I think this subtle lighting makes the design very appealing, so I wanted to include it. But I know that with all the different perspectives out there, there may be some, like you, who don’t see it as a soft light source, so I do understand where you are coming from. I appreciate your opinion and your feedback!

    @Neeraj and @ MARYAM, I am sorry that you are upset about seeing some of the same websites as in other blog posts around the web. I did try to find many examples that were new and fresh, but sometimes web designs that are really good also become well-known in the design world – and for many different reasons. I also wanted to make sure that I included the well-known sites that are great examples of lighting effects because I knew that some people would be disappointed in the article if I left those great examples out. But I appreciate your feedback! I will keep your comments in mind if I create a showcase article again in the future.

    @Roy, @Tom, @Jessica, and to all the others that enjoyed the showcase – Thank you! My ultimate goal was to make a compilation of what myself and Smashing thought were great examples of lighting effects in web design. I am glad you liked it. :o)

    0
  73. 73

    This was a very poor post imo …

    0
  74. 74

    Great showcase – Love the examples!

    0
  75. 75

    Designers are finally starting to embrace the flexibility of .png’s. It really shows with a lot of these designs. layering images and clever use of alpha transparency can lift a website from the screen and make for some interesting effects.

    0
  76. 76

    Ismael Burciaga

    May 9, 2009 7:46 pm

    Angela,

    Thank you for posting this article. I have seen a lot of these sites before and everytime I see them again, I get inspired even more. Some people might complain about seeing the same website in a post, but other readers who don’t read every post learns of a new website that can inspire them too. And thank you for posting Revive Africa on this list. I am the creative director for Church Media Group and who designed Revive Africa. Last but not least, can you explain the reason this site made it to the list? Thank you!

    0
  77. 77

    Any tutorial to help us to achieve similar results?

    0
  78. 78
  79. 79

    Thank you for posting this article

    0
  80. 80

    @Ismael – Good job on the site! It’s a great design. The Smashing editor added a few sites to my initial list to give a few more examples, and yours was one that the editor added, so I can’t personally take all the credit for including it. :o) The yellow gradient gives an illusion of a subtle underlighting and adds depth to the site’s atmosphere. Nice work!

    @Martin – There is a tutorial published by smashing a few weeks ago that is linked to in the intro of this showcase. Hope this helps!

    0
  81. 81

    Once again…. Good article, great examples !
    Thanks SM !

    0
  82. 82

    Thank you for posting this article. Its very nice pack specialy as for me viget labs
    teleit.pl – strony www

    0
  83. 83

    awesome !

    0
  84. 84

    This is another great example http://wnd.pousta.com/
    (from css mania)

    0
  85. 85

    Thanks for including Strutta.com.

    This means that I have the pleasure of sitting next to two designers that have featured in your lists, both for separate sites, and both for different reasons.

    Not that I expect this to settle any disputes (re: sites repeated in lists) , but the two sites I have mentioned have only been featured once each, and we consider it a big deal to that you noticed us!

    0
  86. 86

    Very nice examples. Thx for the inspiration

    0
  87. 87

    there is a job i did that could totally be in this list!
    http://snxxx.deviantart.com/art/schools-newsletter-78634078
    mixing lights and smoke! now thats cool!!

    there is a brazilian work in this list too!! good thing we’re doing quality websites as well. keep up the good work everybody!!

    0
  88. 88

    Bishan Rathore

    May 14, 2009 4:52 am

    Very nice showcase

    0
  89. 89

    Benedikt Roßgardt

    May 15, 2009 8:00 am

    Do you have some tutorials?

    0
  90. 90

    veal cool!

    0
  91. 91

    really nice roundup

    0
  92. 92

    that crush + lovely page has a background image of 1.2MB with barely any exposure. Thats such a waste of bandwidth not to mention that the background could be exactly the same with 10 times smaller filesize.

    0
  93. 93

    adroadtrip.com

    June 2, 2009 5:23 am

    truly inspiring… the level of detail that goes into just on section of these sites is intense. brilliant work!

    0
  94. 94

    Hi!! http://www.paolobortolotti.com site with strange light

    0
  95. 95

    Cool light writing… Link – Site with powerful kinetic light writing, gritty night scenes and subtle fractalised transitions, combined with a Haversine code based Jobs Board.

    0
  96. 96

    Cool light!

    0
  97. 97

    I thought this was great! I will definatley be sharing this with my designer!

    0
  98. 98

    Cool,nice!
    css

    0
  99. 99

    great stuff thanbks for the great inspiration. reminds me of a site i looked at the other day. .Its all html but when you scroll the edges othe boxes play with the background. i find that kinda neat.

    0
  100. 100

    W.O.W !!!! it`s inspired me !!!! thanks for review/showcase ^_^. i very very very love it !

    0
  101. 101

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

    Hello from Chicago web designer.

    0
  102. 102

    These are brilliant. Inspiring.

    0
  103. 103

    right light should be place in the right place

    0
  104. 104

    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
  105. 105

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

    0

↑ Back to top