Menu Search
Jump to the content X
X

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

Masterful Lighting Effects In Web Design Link

45royale

45royale.com

Newism

newism.com.au

TaoEffect

Screenshot

McCafe

Screenshot

Postbox Inc.

Screenshot

Weloveicons.com

Screenshot

31 Three

31three.com

Icondock

Screenshot

Mailchimp

Screenshot

for a beautiful web

Screenshot

CampaignMonitor

campaignmonitor.com

Crush + Lovely

crushlovely.com

Camp Creative Group

campcreativegroup.com

Design moves me

designmovesme.com

ditley

ditley.com

artificial studio

artificialstudio.com

Revive Africa

Screenshot

Lisa Moseley

Screenshot

WebKitbits

Screenshot

rareview

Screenshot

Your Web Job

Screenshot

Strutta

Screenshot

Drew Wilson

drewwilson.com

envato

envato.com

icebrrg

icebrrg.com

Revyver Labs

labs.revyver.com.com

Mike Precious

mikeprecious.com

nekob

nekob.com

nitobi

nitobi.com

Search Inside Video

searchinsidevideo.com

Monterey

seemonterey.com

Tutorial9

tutorial9.net

GoodBytes

goodbytes.be

foehn

foehn.co.uk

Alex Buga

alexbuga.com

youLOVE.us

youlove.us

avalonstar

avalonstar.com

Viget Labs

viget.com

Barack Obama

barackobama.com

(al)

Smashing Book #5

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? For example, Smashing Book 5, packed with smart responsive design patterns and 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.

Advertisement
  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

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

    0
  8. 8

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

↑ Back to top