Menu Search
Jump to the content X X
Smashing Conf New York

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.

35 Examples Of Masterful Lighting Effects In Web Design

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 Link

45royale2

45royale.com3

Newism4

newism.com.au5

TaoEffect6

Screenshot7

McCafe

Screenshot

Postbox Inc.8

Screenshot9

Weloveicons.com

Screenshot

31 Three

31three.com

Icondock10

Screenshot11

Mailchimp12

Screenshot13

for a beautiful web14

Screenshot15

CampaignMonitor16

campaignmonitor.com17

Crush + Lovely18

crushlovely.com19

Camp Creative Group

campcreativegroup.com

Design moves me20

designmovesme.com21

ditley22

ditley.com23

artificial studio24

artificialstudio.com25

Revive Africa26

Screenshot27

Lisa Moseley28

Screenshot29

WebKitbits30

Screenshot31

rareview32

Screenshot33

Your Web Job34

Screenshot35

Strutta36

Screenshot37

Drew Wilson38

drewwilson.com39

envato40

envato.com41

icebrrg42

icebrrg.com43

Revyver Labs

labs.revyver.com.com

Mike Precious44

mikeprecious.com45

nekob46

nekob.com47

nitobi48

nitobi.com49

Search Inside Video50

searchinsidevideo.com51

Monterey52

seemonterey.com53

Tutorial954

tutorial9.net55

GoodBytes56

goodbytes.be57

foehn58

foehn.co.uk59

Alex Buga60

alexbuga.com61

youLOVE.us62

youlove.us63

avalonstar

avalonstar.com

Viget Labs

viget.com

Barack Obama64

barackobama.com65

(al)

Footnotes Link

  1. 1 https://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://www.postbox-inc.com/
  9. 9 http://www.postbox-inc.com/
  10. 10 http://icondock.com/
  11. 11 http://icondock.com/
  12. 12 http://www.mailchimp.com/
  13. 13 http://www.mailchimp.com/
  14. 14 http://forabeautifulweb.com/
  15. 15 http://forabeautifulweb.com/
  16. 16 http://www.campaignmonitor.com
  17. 17 http://www.campaignmonitor.com
  18. 18 http://www.crushlovely.com
  19. 19 http://www.crushlovely.com
  20. 20 http://www.designmovesme.com
  21. 21 http://www.designmovesme.com
  22. 22 http://www.ditley.com
  23. 23 http://www.ditley.com
  24. 24 http://www.artificialstudio.com
  25. 25 http://www.artificialstudio.com
  26. 26 http://reviveafrica.com/
  27. 27 http://reviveafrica.com/
  28. 28 http://lisamoseley.com/
  29. 29 http://lisamoseley.com/
  30. 30 http://www.webkitbits.com/
  31. 31 http://www.webkitbits.com/
  32. 32 http://www.rareview.com/
  33. 33 http://www.rareview.com/
  34. 34 http://yourwebjob.com/
  35. 35 http://yourwebjob.com/
  36. 36 http://www.strutta.com/
  37. 37 http://www.strutta.com/
  38. 38 http://www.drewwilson.com
  39. 39 http://www.drewwilson.com
  40. 40 http://www.envato.com
  41. 41 http://www.envato.com
  42. 42 http://www.icebrrg.com
  43. 43 http://www.icebrrg.com
  44. 44 http://www.mikeprecious.com
  45. 45 http://www.mikeprecious.com
  46. 46 http://www.nekob.com
  47. 47 http://www.nekob.com
  48. 48 http://www.nitobi.com
  49. 49 http://www.nitobi.com
  50. 50 http://www.searchinsidevideo.com
  51. 51 http://www.searchinsidevideo.com
  52. 52 http://www.seemonterey.com
  53. 53 http://www.seemonterey.com
  54. 54 http://www.tutorial9.net
  55. 55 http://www.tutorial9.net
  56. 56 http://www.goodbytes.be
  57. 57 http://www.goodbytes.be
  58. 58 http://www.foehn.co.uk
  59. 59 http://www.foehn.co.uk
  60. 60 http://www.alexbuga.com
  61. 61 http://www.alexbuga.com
  62. 62 http://www.youlove.us
  63. 63 http://www.youlove.us
  64. 64 http://www.barackobama.com
  65. 65 http://www.barackobama.com
SmashingConf New York

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

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

    2
  2. 2

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

    Nice list BTW

    0
  3. 3

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

    DKumar M.
    @instantShift

    0
  4. 4

    These are great – thanks!

    0
  5. 5

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

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

    Pariah Burke

    May 7, 2009 3:12 pm

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

    0
  8. 8

    Scott Prock

    May 7, 2009 3:19 pm

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

    love this post

    0
  10. 10

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

    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

    What about http://cannonballcommunications.com/ ? It’s awesome.

    0
  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

    DiegoChavez

    May 7, 2009 5:35 pm

    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

    Jasper Kennis

    May 7, 2009 10:13 pm

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

    0

↑ Back to top