Smashing Magazine - we smash you with the information that will make your life easier. really.
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 Designs.
[By the way, did you know there is a brand new Smashing Wordpress Book? Push WordPress past its limits!]
Masterful Lighting Effects In Web Design
(al)
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 votes, average: 5.00 out of 5)
Loading ...- 100 Comments
- 1
- 2
May 7th, 2009 2:37 pmNice Showcase!! gives a good idea about respective trend !!
DKumar M.
@instantShift - 3May 7th, 2009 3:08 pm
These are great – thanks!
- 4May 7th, 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!
- 5May 7th, 2009 3:12 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.
- 6May 7th, 2009 3:12 pm
Great examples. May I humbly throw my own site into the hat? http://iampariah.com
- 7May 7th, 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 - 8May 7th, 2009 3:26 pm
love this post
- 9May 7th, 2009 3:49 pm
very inspiring for me! Thanks for the great post, love it!
- 10May 7th, 2009 4:05 pm
Another nice lighting effect can be seen on okb – interactive studio okb – Interactive studio
Nice list BTW
- 11May 7th, 2009 4:23 pm
Very nice showcase, glad to see trends finally moving away from too much over done grunge.
- 12
- 13May 7th, 2009 5:13 pm
Very cool, another master of lighting effect – Paul Lee http://www.paulleedesign.com/
- 14May 7th, 2009 5:17 pm
Nice examples, but didn’t you just do this post like two weeks ago?
- 15May 7th, 2009 5:30 pm
this post is fantastic :)
- 16
- 17May 7th, 2009 6:01 pm
thanks for showing some new stuff :)
its not just the same sites as usual
- 18May 7th, 2009 6:25 pm
Anyone have any good links to get started on creating something like this for a beginner?
- 19May 7th, 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
- 20May 7th, 2009 10:13 pm
Good collection, nice examples. Hype turning into a style to choose from, always nice:)
- 21May 7th, 2009 11:13 pm
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.
- 22May 7th, 2009 11:16 pm
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
- 23May 7th, 2009 11:31 pm
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
- 24May 7th, 2009 11:58 pm
@matt – Also agreed :)
- 25May 8th, 2009 12:02 am
I like the work of Alex Buga, the best combination of CSS/Javascript. Thumbs up!
- 26May 8th, 2009 12:02 am
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
- 27May 8th, 2009 12:14 am
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”.
- 28May 8th, 2009 12:51 am
I really like the trend of lighting effects. When used consistently and well it’s stunning.
- 29May 8th, 2009 12:53 am
Thanks for featuring us and for the great list!
- 30May 8th, 2009 12:58 am
all done by the same designer?
- 31May 8th, 2009 1:03 am
Nice, yes, Masterful? Hmmm… that’s a strong term
- 32May 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.
- 33May 8th, 2009 1:26 am
Very nice, a lot of inspiration here. Good work collecting these.
- 34May 8th, 2009 2:59 am
wow great list! like the Icondock
- 35May 8th, 2009 3:30 am
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.
- 36May 8th, 2009 4:12 am
Cool selection, good lighting makes such a difference!
- 37May 8th, 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.
- 38May 8th, 2009 4:58 am
Beautiful collection. Thanks Smashing.
- 39May 8th, 2009 5:12 am
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.
- 40May 8th, 2009 6:00 am
Beautiful examples, SM. Just the kind of inspiration I could use. Thanks!
- 41May 8th, 2009 6:10 am
The post I have been waiting for.
- 42May 8th, 2009 6:30 am
Pretty sites, but a gradient fill is not a “lighting effect”. It just happens to be trendy.
- 43May 8th, 2009 6:52 am
Great post. Lighting adds a much needed dimension to flat web pages! I plan to reference this post on my blog.
- 44May 8th, 2009 6:57 am
good work and all. I’m just tired of seeing all the same sites.
- 45May 8th, 2009 7:14 am
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!
- 46May 8th, 2009 7:14 am
Nice selection of work. I really Like Paul Lee’s work as well. +1
- 47May 8th, 2009 7:36 am
i love this style of web design. great article once again Angela!
- 48May 8th, 2009 7:48 am
Fällt dem Designer nichts mehr ein: ein Farbverlauf, dass muss es sein!
.
- 49May 8th, 2009 7:59 am
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
- 50May 8th, 2009 8:00 am
Love the Mailchimp Website
- 51May 8th, 2009 8:36 am
As for comment 45… I think the ‘pixelated’ in Newism and 45Royale effect has been designed on purpose. I like it..
- 52May 8th, 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.
- 53May 8th, 2009 10:18 am
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!!
- 54May 8th, 2009 10:38 am
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.
- 55May 8th, 2009 11:16 am
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!
- 56
- 57May 8th, 2009 11:48 am
Some very cool looking sites. What do you think of the lighting in this one? http://www.frogisis.com/
- 58May 8th, 2009 12:43 pm
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.
- 59May 8th, 2009 1:14 pm
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.
- 60May 8th, 2009 1:39 pm
Good collection, nice examples.thanks…
- 61May 8th, 2009 1:51 pm
This was actually wildly inspirational. Nice job finding sites that haven’t been circulated hundreds of times already. Great work!
- 62May 8th, 2009 2:07 pm
Really nice!
- 63May 8th, 2009 3:04 pm
Nice group of examples. How about publishing a “How To” guide with step by step instructions on how to create these types of effects?
- 64May 8th, 2009 5:39 pm
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.
- 65May 8th, 2009 6:40 pm
GOOD DESIGN!
I like it very much….. - 66May 8th, 2009 7:04 pm
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….
- 67May 8th, 2009 7:06 pm
Amazing effects, personally I think that lighting effects are necesary to give life to a unanimated website
- 68
- 69May 8th, 2009 8:21 pm
Smashing People!!! Please stop repeating the same websites in your every next post!!
- 70May 8th, 2009 11:20 pm
what an awesome compilation! they were all awesome! *love*love*
- 71May 9th, 2009 12:04 am
It’s almost always the same web sites, I love smashing magazine but I have to say this showcase was very very poor
- 72May 9th, 2009 4:41 am
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)
- 73May 9th, 2009 2:01 pm
This was a very poor post imo …
- 74May 9th, 2009 2:56 pm
Great showcase – Love the examples!
- 75May 9th, 2009 3:10 pm
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.
- 76May 9th, 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!
- 77May 9th, 2009 11:45 pm
Any tutorial to help us to achieve similar results?
- 78May 10th, 2009 4:28 am
Wow.
- 79
- 80May 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!
- 81May 10th, 2009 11:00 am
Once again…. Good article, great examples !
Thanks SM ! - 82May 10th, 2009 11:58 am
Thank you for posting this article. Its very nice pack specialy as for me viget labs
teleit.pl – strony www - 83May 11th, 2009 12:56 am
awesome !
- 84
- 85May 11th, 2009 3:09 pm
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!
- 86May 12th, 2009 5:56 am
Very nice examples. Thx for the inspiration
- 87May 12th, 2009 7:29 pm
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!!
- 88May 14th, 2009 4:52 am
Very nice showcase
- 89May 15th, 2009 8:00 am
Do you have some tutorials?
- 90May 19th, 2009 11:14 pm
veal cool!
- 91May 20th, 2009 12:54 pm
really nice roundup
- 92May 28th, 2009 3:22 am
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.
- 93June 2nd, 2009 5:23 am
truly inspiring… the level of detail that goes into just on section of these sites is intense. brilliant work!
- 94
- 95June 29th, 2009 8:15 am
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.
- 96July 10th, 2009 1:20 am
Cool light!
- 97July 14th, 2009 5:57 am
I thought this was great! I will definatley be sharing this with my designer!
- 98
- 99August 2nd, 2009 11:10 am
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.
- 100September 13th, 2009 12:59 pm
W.O.W !!!! it`s inspired me !!!! thanks for review/showcase ^_^. i very very very love it !
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- Learn Something Every Day: a nice little blog updated every day - http://bit.ly/rmcES
- We’re Ready for CSS3, but are we Ready for CSS3? - http://bit.ly/cKN7Bz
- lovely-css: a grid-based CSS framework - http://bit.ly/ayA0wb
- How The CSS Selector nth-child Works - http://bit.ly/cgPMqe
- 33 New High Quality Adobe Illustrator Tutorials - http://bit.ly/bTgFbu
- How to Drastically Improve Your Designs - http://bit.ly/a9L1sb
- A Quick Look at Mobile Web Designs - http://bit.ly/9TCWCG
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