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
45royale
Newism
TaoEffect
McCafe
Postbox Inc.
Weloveicons.com
31 Three
Icondock
Mailchimp
for a beautiful web
CampaignMonitor
Crush + Lovely
Camp Creative Group
Design moves me
ditley
artificial studio
Revive Africa
Lisa Moseley
WebKitbits
rareview
Your Web Job
Strutta
Drew Wilson
envato
icebrrg
Revyver Labs
Mike Precious
nekob
nitobi
Search Inside Video
Monterey
Tutorial9
GoodBytes
foehn
Alex Buga
youLOVE.us
avalonstar
Viget Labs
Barack Obama
(al)
Angela Rohner 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
Leave a Comment
Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!
Chris Morledge
May 7th, 2009 2:34 pmNice examples, I have been trying to put lighting affects in my designs for a while now. This will give some good references.
Cheers
@morledge
DKumar M.
May 7th, 2009 2:37 pmNice Showcase!! gives a good idea about respective trend !!
DKumar M.
@instantShift
Nikki
May 7th, 2009 3:08 pmThese are great – thanks!
Klaye Morrison
May 7th, 2009 3:09 pmDamn, we’ll be releasing our site in the next couple of weeks and has some good lighting effects. Good list anyways!
matt
May 7th, 2009 3:12 pmI’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.
Pariah Burke
May 7th, 2009 3:12 pmGreat examples. May I humbly throw my own site into the hat? http://iampariah.com
Scott Prock
May 7th, 2009 3:19 pmThese 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
name
May 7th, 2009 3:26 pmlove this post
Patra
May 7th, 2009 3:49 pmvery inspiring for me! Thanks for the great post, love it!
Bee
May 7th, 2009 4:05 pmAnother nice lighting effect can be seen on okb – interactive studio okb – Interactive studio
Nice list BTW
CodeArt Media
May 7th, 2009 4:23 pmVery nice showcase, glad to see trends finally moving away from too much over done grunge.
Sean
May 7th, 2009 4:53 pmWhat about http://cannonballcommunications.com/ ? It’s awesome.
Polo
May 7th, 2009 5:13 pmVery cool, another master of lighting effect – Paul Lee http://www.paulleedesign.com/
Sean
May 7th, 2009 5:17 pmNice examples, but didn’t you just do this post like two weeks ago?
Evan
May 7th, 2009 5:30 pmthis post is fantastic :)
DiegoChavez
May 7th, 2009 5:35 pmNice examples, i like this site http://macalicious.com/
Jessica
May 7th, 2009 6:01 pmthanks for showing some new stuff :)
its not just the same sites as usual
Kevin
May 7th, 2009 6:25 pmAnyone have any good links to get started on creating something like this for a beginner?
Wayde Christie
May 7th, 2009 7:03 pm@matt – I agree :) Link
Jasper Kennis
May 7th, 2009 10:13 pmGood collection, nice examples. Hype turning into a style to choose from, always nice:)
Jee Han
May 7th, 2009 11:13 pmThe 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.
mathiz
May 7th, 2009 11:16 pmHmmm 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
Quakeulf >:3
May 7th, 2009 11:31 pmSame, 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
Jordan Moore
May 7th, 2009 11:58 pm@matt – Also agreed :)
Peter M.
May 8th, 2009 12:02 amI like the work of Alex Buga, the best combination of CSS/Javascript. Thumbs up!
Nikkel
May 8th, 2009 12:02 amYour déja vu feeling refers to an article on Vandelay Design :
http://vandelaydesign.com/blog/galleries/light-effects/
IMO, I prefer this selection…
@Nikkel
PrabhakaranG
May 8th, 2009 12:14 amI 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”.
David
May 8th, 2009 12:51 amI really like the trend of lighting effects. When used consistently and well it’s stunning.
GoodBytes.be
May 8th, 2009 12:53 amThanks for featuring us and for the great list!
jean-marc
May 8th, 2009 12:58 amall done by the same designer?
Ian
May 8th, 2009 1:03 amNice, yes, Masterful? Hmmm… that’s a strong term
Jason
May 8th, 2009 1:16 am@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.
Matěj Grabovský
May 8th, 2009 1:26 amVery nice, a lot of inspiration here. Good work collecting these.
Onemorepixel
May 8th, 2009 2:59 amwow great list! like the Icondock
Angela
May 8th, 2009 3:30 amThanks 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.
Tom Bradshaw
May 8th, 2009 4:12 amCool selection, good lighting makes such a difference!
Kristin Andrews
May 8th, 2009 4:41 amSuch 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.
Jesse
May 8th, 2009 4:58 amBeautiful collection. Thanks Smashing.
Greg
May 8th, 2009 5:12 amThis 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.
Nils Rasmusson
May 8th, 2009 6:00 amBeautiful examples, SM. Just the kind of inspiration I could use. Thanks!
bs.kishore
May 8th, 2009 6:10 amThe post I have been waiting for.
Billco
May 8th, 2009 6:30 amPretty sites, but a gradient fill is not a “lighting effect”. It just happens to be trendy.
Craig Wann
May 8th, 2009 6:52 amGreat post. Lighting adds a much needed dimension to flat web pages! I plan to reference this post on my blog.
nick
May 8th, 2009 6:57 amgood work and all. I’m just tired of seeing all the same sites.
w3bdev
May 8th, 2009 7:14 am45royal 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!
gl
May 8th, 2009 7:14 amNice selection of work. I really Like Paul Lee’s work as well. +1
Roy Vergara
May 8th, 2009 7:36 ami love this style of web design. great article once again Angela!
DaMan
May 8th, 2009 7:48 amFällt dem Designer nichts mehr ein: ein Farbverlauf, dass muss es sein!
.
Burger
May 8th, 2009 7:59 amHey 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
Greatcreativelinks.com
May 8th, 2009 8:00 amLove the Mailchimp Website
Henrietteq
May 8th, 2009 8:36 amAs for comment 45… I think the ‘pixelated’ in Newism and 45Royale effect has been designed on purpose. I like it..
Siouxie Boshoff
May 8th, 2009 8:45 amThese are some great examples. Some of them are simply stunning. Thanks for sharing. This will make a great resource for inspiration.
Nick Hand
May 8th, 2009 10:18 amWow 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!!
Rob Loukotka
May 8th, 2009 10:38 amAwesome! 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.
Sean
May 8th, 2009 11:16 amExactly. 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!
Dennis van Lith
May 8th, 2009 11:34 amSomething else with particles of light…
http://le-marquis.nelhost.com/
Kristoffer
May 8th, 2009 11:48 amSome very cool looking sites. What do you think of the lighting in this one? http://www.frogisis.com/
Brad
May 8th, 2009 12:43 pmLighting 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.
OutThisLife
May 8th, 2009 1:14 pmI 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.
bitlimakina
May 8th, 2009 1:39 pmGood collection, nice examples.thanks…
Zach Dunn
May 8th, 2009 1:51 pmThis was actually wildly inspirational. Nice job finding sites that haven’t been circulated hundreds of times already. Great work!
miniMAC
May 8th, 2009 2:07 pmReally nice!
CJ
May 8th, 2009 3:04 pmNice group of examples. How about publishing a “How To” guide with step by step instructions on how to create these types of effects?
David A
May 8th, 2009 5:39 pmVery 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.
syarip
May 8th, 2009 6:40 pmGOOD DESIGN!
I like it very much…..
Guy
May 8th, 2009 7:04 pmMan, 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….
Carlos Leopoldo
May 8th, 2009 7:06 pmAmazing effects, personally I think that lighting effects are necesary to give life to a unanimated website
nzdesignagirl
May 8th, 2009 7:38 pmhttp://www.orcon.net.nz i like the lighting behind the logo….
Neeraj Kumar
May 8th, 2009 8:21 pmSmashing People!!! Please stop repeating the same websites in your every next post!!
abdusfauzi
May 8th, 2009 11:20 pmwhat an awesome compilation! they were all awesome! *love*love*
MARYAM
May 9th, 2009 12:04 amIt’s almost always the same web sites, I love smashing magazine but I have to say this showcase was very very poor
Angela
May 9th, 2009 4:41 amI 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)
Jonathan
May 9th, 2009 2:01 pmThis was a very poor post imo …
Cindy
May 9th, 2009 2:56 pmGreat showcase – Love the examples!
Pete
May 9th, 2009 3:10 pmDesigners 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.
Ismael Burciaga
May 9th, 2009 7:46 pmAngela,
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!
Martin
May 9th, 2009 11:45 pmAny tutorial to help us to achieve similar results?
Alexis
May 10th, 2009 4:28 amWow.
sama creation
May 10th, 2009 5:05 amThank you for posting this article
Angela
May 10th, 2009 8:02 am@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!
detruk
May 10th, 2009 11:00 amOnce again…. Good article, great examples !
Thanks SM !
pawel
May 10th, 2009 11:58 amThank you for posting this article. Its very nice pack specialy as for me viget labs
teleit.pl – strony www
ccoz
May 11th, 2009 12:56 amawesome !
mat
May 11th, 2009 2:22 pmThis is another great example http://wnd.pousta.com/
(from css mania)
Jordan
May 11th, 2009 3:09 pmThanks 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!
aliamin_
May 12th, 2009 5:56 amVery nice examples. Thx for the inspiration
raphael
May 12th, 2009 7:29 pmthere 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!!
Bishan Rathore
May 14th, 2009 4:52 amVery nice showcase
Benedikt Roßgardt
May 15th, 2009 8:00 amDo you have some tutorials?
jaslee
May 19th, 2009 11:14 pmveal cool!
Chris Robinson
May 20th, 2009 12:54 pmreally nice roundup
mark
May 28th, 2009 3:22 amthat 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.
adroadtrip.com
June 2nd, 2009 5:23 amtruly inspiring… the level of detail that goes into just on section of these sites is intense. brilliant work!
paolo
June 2nd, 2009 12:41 pmHi!! http://www.paolobortolotti.com site with strange light
Mel
June 29th, 2009 8:15 amCool light writing… Link – Site with powerful kinetic light writing, gritty night scenes and subtle fractalised transitions, combined with a Haversine code based Jobs Board.
james
July 10th, 2009 1:20 amCool light!
Charity AD
July 14th, 2009 5:57 amI thought this was great! I will definatley be sharing this with my designer!
blue sky
July 14th, 2009 6:33 amCool,nice!
css
dillo
August 2nd, 2009 11:10 amgreat 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.
fajarfaqih
September 13th, 2009 12:59 pmW.O.W !!!! it`s inspired me !!!! thanks for review/showcase ^_^. i very very very love it !