27 Beautiful Color Gradients For Your Next Design Project

Looking for beautiful gradients for your graphic, web, or UI design? UVdesk has created a useful online tool called coolHue – a free collection of over 60 gradients that you can use for design and code. You can browse through the swatches, copy their CSS codes and even download a .PNG version of each one. Here are some of our favourites from the collection.

1.

Blue color gradient, shades, background — #ABDCFF → #0396FF

2.

Orange color gradient, shades, background — #FEB692 → #EA5455

3.

Purple color gradient, shades, background — #CE9FFC → #7367F0

4.

Green color gradient, shades, background — #90F7EC → #32CCBC

5.

Yellow & Orange color gradient, shades, background — #FFF6B7 → #F6416C

6.

Purple color gradient, shades, background — #E2B0FF → #9F44D3

7.

Purple color gradient, shades, background — #F97794 → #623AA2

8.

Purple color gradient, shades, background — #F761A1 → #8C1BAB

9.

Blue color gradient, shades, background — #43CBFF → #9708CC

10.

Yellow color gradient, shades, background — #FAD7A1 → #E96D71

11.

Blue color gradient, shades, background — #52E5E7 → #130CB7

12.

Red color gradient, shades, background — #F05F57 → #360940

13.

Blue color gradient, shades, background — #2AFADF → #4C83FF

14.

Yellow color gradient, shades, background — #FFF886 → #F072B6

15.

Blue color gradient, shades, background — #97ABFF → #123597

16.

Purple color gradient, shades, background — #FF6FD8 → #3813C2

17.

Purple color gradient, shades, background — #EE9AE5 → #5961F9

18.

Orange color gradient, shades, background — #FFD3A5 → #FD6585

19.

Purple & Blue color gradient, shades, background — #FD6585 → #0D25B9

20.

Pink color gradient, shades, background — #FF7AF5 → #513162

21.

Orange color gradient, shades, background — #FFE985 → #FA742B

22.

Purple & Blue color gradient, shades, background — #FFA6B7 → #1E2AD2

23.

Orange color gradient, shades, background — #FFAA85 → #B3315F

24.

Blue color gradient, shades, background — #72EDF2 → #5151E5

25.

Orange color gradient, shades, background — #FF9D6C → #BB4E75

26.

Purple color gradient, shades, background — #3B2667 → #BC78EC

27.

Purple & Blue color gradient, shades, background — #FAB2FF → #1904E5

How To Use Gradients

Like any element of design, gradients only look good if implemented aesthetically. Here’s a useful infographic by Creative Market that explains the different types of gradients and offers tips on how to use them correctly in your designs.

Share this post with a designer friend and voice your views in the comments below.

Don't Miss:

Share Your Views:

Comments for this post are now closed.
Share your thoughts with 433,000+ design lovers on our Facebook Page.