Beautiful Gradient Effects On Web design – Research: Part 2
Dainis Graveris
It’s Monday and beautiful time to get inspired with very good examples and research a little bit what’s happening behind the scenes from graphic designer view.
This time I will showcase and analyze gradient effects used effectively in web-design and logo design creation. It’s very important to create and use subtle and eye-catchy color combinations and transitions to achieve modern and stylish effect. Maybe you haven’t noticed but light and shadow effects are widely used and it doesn’t necessary mean just color, but to bring greater effect, use textures and then put on them light but observable transparent color effects and you’ll see magic happening. Using light you can easily emphasize places and actually lead visitor’s attention from point to point using just color, illustrations, text size.
After this short introduction I’ll start to share beautiful examples of web site designs which use such light,shadow and gradient effects in very good way. And if you haven check out 36 Color Gradient Sets For Photoshop and Resource Sites: Part 1.
1. MikePrecious
Beautiful light and subtle spotlight effect on the top of texture. Such effects can be achieved on Photoshop using Filter–>Render–>Lightning Effects and playing with settings.
To get first and main focus on Mike Precious name and specialty one more .png transparent image with radial gradient effect is used. Notice subtle color variations from #F0F0F0 to #D1D1D1 and then at the end going back to lighter color.
2. EctoMachine
Notice this image below are used to repeat-y whole screen, which is great way to add interesting effect but in the same time get fast loading speed. If there would be simpler gradient effect you also could choose to use just 1px wide width image with gradient effects to get even faster loading time and beautiful effect.
3. Cellar-App
Very good example of 1px wide image on background covering whole page. (1px width and 3081px height).
4. Rawsterne
As you can see in this zoomed version, very subtle linear gradient is used, though I believe much more narrower image could be used in this example.
5. DigitalMash
Linear gradient image (40x1216px) is used through whole site from lighter on the top of the site to little darker on bottom.
6. CobbleStone Community
Radial gradient is created to take out company’s logo as first accent, little texture and color variations used to look really enjoyable wau. Definitely very good design.
7. DesignChuchi
One more amazing website with very light color variations making it to look very professional. Notice also top background image used 1px width and 237px height, other images like logo and mouse are just positioned above that one image.
8. VigetLabs
Look at the background image with many lightning effects in the center but on the sides transferring to simple linear gradient to fill big resolution screens. Actually there are 3 main background images using gradient effects on header, center line (light gradient) and then on the footer.
9. Coda
Almost whole professional feeling is achieved just by that huge background image (1600x1200px) using radial gradient and light texture. By the way such texture can be easily created in Photoshop on Filter panel – Noise – Add noise and after that just play with settings, opacity and color variations to get very good results.
10. Good Barry
One more time background image is 30px wide and 1900px height – subtle yet very effective. Even navigation has linear gradient effect to give dimensional effect.
11. OnWired
I cannot express how much I love this web design, it completely consists of light, shadows, radial gradients, many emphasis easily leading visitor through whole page. Exclusive eye-candy dimensional design and very good example for research.
12. ElementFusion
Color always help to organize and separate content, notice that center part is the lightest one taking out main image to get visitors attention to act. Nice icons, color variations explaining what this company is offering on the main image is really good choice.
13. Australia 2018-2022
Huge background image with radial gradient behind the earth and other lightning sparks to grab attention on football players, big “Join Our Bid” button and time countdown. Impressive work on Photoshop and beautiful implementation in web design.
14. Bohemian Coding
Background image is repeated on x-y asis, but to stand out with content in the center – white color with dark grey outer glow is used. Looks really professional. Notice light linear gradient effects on navigation bar and bottom area of main content where subtle grey gradient is used to darken bottom area.
15. AteBits
One of the best, modern web designs – beautiful eye candy. I must say here again – “Less is more” – very subtle color gradients are used, radial gradient on the center and navigation with linear gradients and very subtle dark outer glow to make those buttons stand out. Look behind the scenes how top background image + another one with radial gradient and other separator lines are used.
In the footer again another dark image repeat-x-y asis is used.
I really hope You enjoy this kind of articles, which is more inspiring, but this time looking a little bit behind the scenes. Stay updated because this is just Part 2 in series, there will be two more continuations.
36 Color Gradient Sets For Photoshop and Resource Sites: Part 1
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
Kaplang
Posted 1025 days ago 25cool post and so true, :)
Dainis Graveris
Posted 1025 days ago 24of course you’re right! I just wanted to show how such gradients can be used, of course some of them are not really usable because of big background images.
Ashely Adams : Sticker Printing
Posted 1040 days ago 23Nice post! I do agree that using subtle and eye-catchy color combinations are essential. It helps to bring a modern and stylish effect. Gradients are also impressive in webdesign. But you need to be very careful as it may look ugly if you cannot use the light and shadow effects properly. You also need to be careful about the fonts.
sketsaanonym
Posted 1041 days ago 22i always like web design with good gradients it make looks clean and profesional thanks for great article
Adam
Posted 1041 days ago 21This is a great article of examples.
Doug Greathouse
Posted 1041 days ago 20Let me say I am a huge fan of gradients and these are great examples.
.-= Doug Greathouse´s last blog ..How to Double Your Income Starting With Just $20 =-.
RTIQLIT
Posted 1042 days ago 19AMAZING article! Thanks so much for taking the time to explain how some of the effects were achieved. That was most helpful of all!
Curtis Armstrong
Posted 1043 days ago 18This is a great post. Excellent inspiration for gradient backgrounds for web design. I am actually working on a web project and this is a great resource! Thanks!
gautam hans
Posted 1043 days ago 17Delicious! Loveley. Good for inspiration. Dugg your post
.-= gautam hans´s last blog ..Tweetmeme vs Twittley: Which one is better? =-.
Mon
Posted 1043 days ago 16For the one with the light bulb, the real author is actually on istockphoto: http://www.istockphoto.com/stock-photo-6129616-green-light.php
Johnson Koh
Posted 1043 days ago 15Very good writeup Dainis! ReTweeted!
.-= Johnson Koh´s last blog ..Making of Mafia in the Jungle =-.
Mitesh
Posted 1044 days ago 14great examples… thank you for featuring these sites.
joyoge designers' bookmark
Posted 1044 days ago 13elite resources here.. thank you for post @dainis
.-= joyoge designers’ bookmark´s last blog ..Beautiful Gradient Effects On Web design – Research: Part 2 =-.
Charlotte
Posted 1044 days ago 12Great article – thanks for the tips
Calgary Graphic Design
Posted 1044 days ago 11Hey there are some fantastic looking sites there. Thanks for sharing – now it’s time to tart up my own site!
Janko
Posted 1045 days ago 10Nice one, dugg!
.-= Janko´s last blog ..Create fancy share box with CSS and jQuery =-.
Roberto
Posted 1045 days ago 9Yah these gradients effects are sick. I particularly like Cellar App and Digital Mash. I gave this post a big Stumble.
RobertO
Graphic Design Schools.org
.-= Roberto´s last blog ..Top Ten College Scholarships For Graphic Design Majors =-.
Kawsar Ali
Posted 1045 days ago 8nice post tweeted,stumbled, reddited
.-= Kawsar Ali´s last blog ..15 Website for jQuery Enthusiast and Addicts =-.
Tom Ross
Posted 1045 days ago 7I love how you explained how to achieve some of these effects and also isolated the background images. Great post! Tweeted+Dugg :)
.-= Tom Ross´s last blog ..20 Masterful Digitally Painted Celebrity Portraits =-.
Luis Lopez
Posted 1045 days ago 6Gradients are really impressive in webdesign lately, it gives you a bit of deep in your design, but it must be not to evident either, because if it does it looks ugly.
.-= Luis Lopez´s last blog ..Video Of The Week #05 – Minimalism =-.
Allen
Posted 1045 days ago 5This is a great article! The littlest additions can make a huge difference.
Frank Stallone
Posted 1045 days ago 4I was just talking to my co-worker about successful use of gradient so again you have read my mind!
Thanks!
.-= Frank Stallone´s last blog ..Major Facelift =-.
BunnygotBlog
Posted 1045 days ago 3Very Good! Stumbled.
Phaoloo
Posted 1045 days ago 2Great effects
.-= Phaoloo´s last blog ..FreshDiagnose – The Effective Tool To Know All Information About Your Computer =-.
Binoj Xavier
Posted 1045 days ago 1Yes. Very Beautiful ;) Tweeted
.-= Binoj Xavier´s last blog ..binojxavier: Beautiful Gradient Effects On Web design [Pics] http://tr.im/s6U7 =-.