Beautiful Gradient Effects On Web design – Research: Part 2

Posted in Inspiration, Tips, Web Design5 years ago • Written by 24 Comments

title-gradients-in-webdesign

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

mike-precious-gradient-effects-inspiration

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.

mike-precious-gradient-effects-inspiration-image

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.

mike-precious-global-logo

2. EctoMachine

ectomagazine-gradient-effects-inspiration

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.

ectomachine-gradient-example

3. Cellar-App

Very good example of 1px wide image on background covering whole page. (1px width and 3081px height).

cellar-gradient-effects-inspiration

4. Rawsterne

rawsterne-gradient-effects-inspiration

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.

rawsterne-gradient-effects-inspiration-image

5. DigitalMash

Linear gradient image (40x1216px) is used through whole site from lighter on the top of the site to little darker on bottom.

digital-mash-gradient-effects-inspiration

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.

cobblestone-gradient-effects-inspiration

cobblestone-gradient-effects-inspiration-image

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.

design-chuchi-precious-gradient-effects-inspiration

8. VigetLabs

viget-labs-gradient-effects-inspiration

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.

viget-labs-gradient-effects-inspiration-image

9. Coda

coda-gradient-effects-inspiration

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.

coda-gradient-effects-inspiration-image

10. Good Barry

good-barry-gradient-effects-inspiration

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.

good-barry-gradient-effects-inspiration-navigation

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.

onwired-gradient-effects-inspiration

12. ElementFusion

element-fusion-gradient-effects-inspiration

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.

element-fusion-gradient-effects-inspiration-image

13. Australia 2018-2022

australia-footbal-gradient-effects-inspiration

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.

australia-footbal-gradient-effects-inspiration-image

14. Bohemian Coding

bohemian-coding-gradient-effects-inspiration

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.

bohemian-coding-gradient-effects-inspiration-image

bohemian-coding-gradient-effects-inspiration-image2

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.

ate-bits-gradient-effects-inspiration

In the footer again another dark image repeat-x-y asis is used.

ate-bits-gradient-effects-inspiration-image

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

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

215 Written ArticlesWebsiteGoogle+

Dainis is 25 years young man, who struggled for 3 years while studying in design academy and working for local design agency, because of ignorant teachers and agency boss. He couldn't believe this is all life could offer to him! And then he discovered true Internet possibilities, he was lucky to find his passion early in life and take advantage of this beautiful Information (Internet) Age! Now he is committed to help others succeed, to help others take charge of their life and follow their passion! His goal is to open Your eyes and help unveil Your true potential!

24 Comments Best Comments First
  • RTIQLIT

    Saturday, December 19th, 2009 04:32

    15

    The best part about this article is that you separated the actual gradient from the rest of the design. Seeing the pages gave me inspiration; separating the gradients showed me it was achieved. AWESOME work! Thanks so much!

    +4
    • Dainis Graveris

      Saturday, December 19th, 2009 12:47

      16

      RTIQLIT Thanks, I always like to put my efforts into works, so you actually see what I want to show, not just yet another list post :)

      -1
  • Johnson Koh

    Wednesday, July 15th, 2009 06:23

    9

    Very good writeup Dainis! ReTweeted!

    0
  • Curtis Armstrong

    Thursday, July 16th, 2009 03:22

    10

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

    0
  • Frank Stallone

    Monday, July 13th, 2009 19:01

    1

    I was just talking to my co-worker about successful use of gradient so again you have read my mind!

    Thanks!

    0
  • gautam hans

    Wednesday, July 15th, 2009 21:25

    11

    Delicious! Loveley. Good for inspiration. Dugg your post

    0
  • Charlotte

    Tuesday, July 14th, 2009 15:15

    8

    Great article – thanks for the tips

    0
  • Janko

    Tuesday, July 14th, 2009 00:13

    7

    Nice one, dugg!

    0
  • Allen

    Monday, July 13th, 2009 19:36

    2

    This is a great article! The littlest additions can make a huge difference.

    0
  • Luis Lopez

    Monday, July 13th, 2009 19:56

    3

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

    0
  • Tom Ross

    Monday, July 13th, 2009 20:35

    4

    I love how you explained how to achieve some of these effects and also isolated the background images. Great post! Tweeted+Dugg :)

    0
  • Roberto

    Monday, July 13th, 2009 23:48

    6

    Yah these gradients effects are sick. I particularly like Cellar App and Digital Mash. I gave this post a big Stumble.

    0
  • Kawsar Ali

    Monday, July 13th, 2009 20:58

    5

    nice post tweeted,stumbled, reddited

    0
  • Ashely Adams

    Saturday, July 18th, 2009 09:41

    12

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

    0
  • Dainis Graveris

    Sunday, August 2nd, 2009 10:58

    13

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

    0
  • sarath

    Friday, August 26th, 2011 15:11

    21

    these are great collection.

    0
  • Craig

    Friday, January 13th, 2012 03:00

    22

    Thanks for the helpful info, I’m going to edit the header on my website using a gradient. Should look much better.

    0
  • Dirk

    Saturday, February 11th, 2012 04:45

    23

    Should these gradients be created in photoshop or illustrator? which is better?

    0
  • Dr. Drosu Dental Centre

    Monday, April 9th, 2012 18:02

    24

    Great collection of websites. I especially like the Hero For Hire, and Atebits websites. I’m looking to redesign my website so the inspiration is greatly appreciated.

    Cheers.

    0
  • Angielski Wrocław

    Monday, July 4th, 2011 20:56

    20

    great collection, i like them all

    0
  • Camisetas

    Wednesday, December 2nd, 2009 00:51

    14

    Excellent inspiration for gradient backgrounds! I love gradients and these are great examples. Thanks for sharing how we can make the design.

    0
  • Thomas

    Thursday, June 16th, 2011 16:46

    19

    Wonderful collection of websites. I’m currently looking for a gradient background on my website (seems to be modern now) and got some new ideas. Thanks.

    0
  • Lauren

    Thursday, January 13th, 2011 09:26

    17

    Love some of the designs that have been featured. Good article and thanks for sharing.

    Lauren

    0
  • Janna

    Tuesday, June 14th, 2011 22:32

    18

    Thanks so much. It’s always great to know how designers achieve these awesome effects. Great source for inspiration.

    0
  • Dr. Drosu Dental Centre

    Monday, April 9th, 2012 18:02

    24

    Great collection of websites. I especially like the Hero For Hire, and Atebits websites. I’m looking to redesign my website so the inspiration is greatly appreciated.

    Cheers.

    0
  • Dirk

    Saturday, February 11th, 2012 04:45

    23

    Should these gradients be created in photoshop or illustrator? which is better?

    0
  • Craig

    Friday, January 13th, 2012 03:00

    22

    Thanks for the helpful info, I’m going to edit the header on my website using a gradient. Should look much better.

    0
  • sarath

    Friday, August 26th, 2011 15:11

    21

    these are great collection.

    0
  • Angielski Wrocław

    Monday, July 4th, 2011 20:56

    20

    great collection, i like them all

    0
  • Thomas

    Thursday, June 16th, 2011 16:46

    19

    Wonderful collection of websites. I’m currently looking for a gradient background on my website (seems to be modern now) and got some new ideas. Thanks.

    0
  • Janna

    Tuesday, June 14th, 2011 22:32

    18

    Thanks so much. It’s always great to know how designers achieve these awesome effects. Great source for inspiration.

    0
  • Lauren

    Thursday, January 13th, 2011 09:26

    17

    Love some of the designs that have been featured. Good article and thanks for sharing.

    Lauren

    0
  • RTIQLIT

    Saturday, December 19th, 2009 04:32

    15

    The best part about this article is that you separated the actual gradient from the rest of the design. Seeing the pages gave me inspiration; separating the gradients showed me it was achieved. AWESOME work! Thanks so much!

    +4
    • Dainis Graveris

      Saturday, December 19th, 2009 12:47

      16

      RTIQLIT Thanks, I always like to put my efforts into works, so you actually see what I want to show, not just yet another list post :)

      -1
  • Camisetas

    Wednesday, December 2nd, 2009 00:51

    14

    Excellent inspiration for gradient backgrounds! I love gradients and these are great examples. Thanks for sharing how we can make the design.

    0
  • Dainis Graveris

    Sunday, August 2nd, 2009 10:58

    13

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

    0
  • Ashely Adams

    Saturday, July 18th, 2009 09:41

    12

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

    0
  • gautam hans

    Wednesday, July 15th, 2009 21:25

    11

    Delicious! Loveley. Good for inspiration. Dugg your post

    0
  • Curtis Armstrong

    Thursday, July 16th, 2009 03:22

    10

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

    0
  • Johnson Koh

    Wednesday, July 15th, 2009 06:23

    9

    Very good writeup Dainis! ReTweeted!

    0
  • Charlotte

    Tuesday, July 14th, 2009 15:15

    8

    Great article – thanks for the tips

    0
  • Janko

    Tuesday, July 14th, 2009 00:13

    7

    Nice one, dugg!

    0
  • Roberto

    Monday, July 13th, 2009 23:48

    6

    Yah these gradients effects are sick. I particularly like Cellar App and Digital Mash. I gave this post a big Stumble.

    0
  • Kawsar Ali

    Monday, July 13th, 2009 20:58

    5

    nice post tweeted,stumbled, reddited

    0
  • Tom Ross

    Monday, July 13th, 2009 20:35

    4

    I love how you explained how to achieve some of these effects and also isolated the background images. Great post! Tweeted+Dugg :)

    0
  • Luis Lopez

    Monday, July 13th, 2009 19:56

    3

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

    0
  • Allen

    Monday, July 13th, 2009 19:36

    2

    This is a great article! The littlest additions can make a huge difference.

    0
  • Frank Stallone

    Monday, July 13th, 2009 19:01

    1

    I was just talking to my co-worker about successful use of gradient so again you have read my mind!

    Thanks!

    0

Comments are closed.

54.196.215.114 - unknown - unknown - US