25 Examples Of Light Effects In Web Design

Some examples of how people use light effects to enhance their web designs either by giving it more colour or by giving it more depth, check out my selection from around the web for some inspiration.

You might also enjoy: 25 Examples of Light and Space Effects In Web Design

Trent Cruising

Squarespace

Theater Website Services

Serj

Mediocore

Macalicious

Yourt Web Job

Jamison Banham

Alcomi

Us trendy

Poolie Studios

Pixel-House

Twiistup

Source Bits

Sergey Stanchev

Icon Dock

Graphik

Future Tap

Fernando Sergio

Feels TV

Digimurai

Design Disease

Causecast

Box Wish

Code Art Media

Comments

Seen any more light effects in designs any where feel free to leave a link in the comments.

Author of this post: Max Stanworth

Iam the creator and editor of Design Shard, I created this blog to post my inspirations, work and free resources that I hope others find interesting too you can also follow me on twitter @designshard. See all posts by: Max Stanworth

65 Comments (Leave a Comment)

Sarasota condos

December 22, 2011

Thanks for sharing this! I’ve learned so much from your blog, I can’t even explain it. :) I think I need some more lessons on effects and editing some designs.

Happy holidays!
Reply
Flourence

December 20, 2011

Very useful blog…
website design perth
Reply
Christopher

March 5, 2011

These examples are great! Thank you for sharing.
Christopher´s last [type] ..Controlling – Anbieter finden
Reply
Nitin

November 23, 2010

Amazing light effects
Reply
Amr Boghdady

@DeutschedWeb November 21, 2010

Wow, you’ve got pretty good examples posted up there. Very inspiring !
Amr Boghdady´s last [type] ..Deutschedcom Launched !
Reply
ande

October 20, 2010

I don’t know but I always like anything that has a rather blue color in it…its so nice and soothing. all the blue color is amazing to me.
ande´s last [type] ..Diet Golongan Darah
Reply
Henrik - Web Designer Perth

August 11, 2010

While I do like colourful blurs and bokeh in the background they do seem to be a bit overused these days.
Reply
blue2x

August 6, 2010

i like the layout of serj , its like the beach on a sunny day , the lighting is not too much that it hurts the eyes, but just the right amount.
blue2x´s last [type] ..Social Media Icon Pack – Fireworks Png Of The Week
Reply
Gemma

@gemmaweirs July 25, 2010

The TrentCruising website has an easy on the eye light effect which can be duplicated if you follow the tutorial at http://www.scribd.com/doc/7239094/Photoshop-Underwater-Effect. Just follow the instructions for creating the light effect and ignore the rest of the tutorial.
Reply
Jessica

July 21, 2010

I don’t know but I always like anything that has a blue color in it…its so nice and soothing. All the blue screen shots above look pretty amazing to me.
Jessica´s last [type] ..Acai Optimum and Advanced Colon Cleanse Helps Lose Weight
Reply
dotndot

April 25, 2010

Wonderful collection.Good one.
Reply
Richard Ball

March 4, 2010

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!
.-= Richard Ball´s last blog ..Website Design Compatibility Checking =-.
Reply
Stefani Ledl

February 7, 2010

Great blog, although I think some of the stuff on itt is a little pre used lol.
Reply
Lydia Wieser

November 3, 2009

This can’t be formulated better
Reply
Heinrich Antle

October 10, 2009

Well done – keep it up!
Reply
Marketing guy

@jivaldi September 23, 2009

We love this page and use it as a reference for clients looking to get some pop in their sites! We also used it as inspiration for our own redesign (http://www.jivaldi.com).
Reply
Heather @ Mortgage Modification Issues

September 14, 2009

It is just like drawing a picture and adding light to it. What a difference it would make to a website that may not as cool as this one. I think my favorite from above is US trendy. I love the designs in the background.
Reply
Mark

September 4, 2009

Great collection of inspiration here!

Check out http://www.knrdesigns.com

Keep up the good work!
Reply
Pradeep Singh

September 2, 2009

Great examples guys,
thanks

Pradeep
Reply
Carter Creative Design

@cartercreative August 30, 2009

Great reference. Nice to get of designers prospectives. Not only in choice of ‘liked’ sites, but element selection. The ‘Light and Space’ examples are also well worth bookmarking.
Reply
fractalfrog

August 21, 2009

Thanks for the round-up. Some really nice examples.
Here are some more:
http://newism.com.au/
http://www.neutroncreations.com/
http://www.foehn.co.uk/ (try to ignore the annoying flash banner)
http://www.rareview.com/ (nice, subtle flash header)
http://www.friskdesign.com/
Reply