180 color gradients in photoshop/sketch formats
![180 color gradients in photoshop/sketch formats](/content/images/size/w2000/2021/01/joao-barbosa-G0EOSG4ScWM-unsplash.jpg)
WebGradients is a collection of 180 color gradients provided for free.
Here is the thumbnail previewing all 180 gradients. Original image link.
![](https://transang.me/content/images/2020/05/180.png)
The collection in photoshop format
The collection in sketch format
There is also a website for this collection. The list of color codes and css is open sourced at Github repository.
Yet, another 300-gradient collection by Leo Simon in photoshop gradient preset format (grd file). Download file here
Here are some previews from this collection
- Shore #70e1f5 → #ffd194
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-shore.jpg)
2. Vanusa #da4453 → #89216b
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-vanusa.jpg)
3. Shifter #f80759 → #bc4e9c
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-shifter.jpg)
4. Ohhappiness #96c93d → #00b09b
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-ohhappiness.jpg)
5. Orange Coral #ff9966 → #ff5e62
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-orange-coral.jpg)
6. Purpink #e100ff → #7f00ff
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-purpink.jpg)
7. Crimson Tide #c6426e → #642b73
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-crimson-tide-1.jpg)
8. Relay #ffaf7b → #d76d77 → #3a1c71
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-relay.jpg)
9. Mello #8e44ad → #c0392b
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-mello.jpg)
10. Can You Feel The Love Tonight #b06ab3 → #4568dc
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-can-you-feel-the-love-tonight-1.jpg)
11. Roseanna #ffc3a0 → #ffafbd
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-roseanna.jpg)
12. Easymed #dce35b → #45b649
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-easymed-1.jpg)
13. Ibiza Sunset #ff6a00 → #ee0979
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-ibiza-sunset-1.jpg)
14. Cosmic Fusion #ff00cc → #333399
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-cosmic-fusion-1.jpg)
15. Netflix #8e0e00 → #1f1c18
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-netflix.jpg)
16. Passion #e35d5b → #e53935
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-passion.jpg)
17. Timber #00dbde → #fc00ff
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-timber.jpg)
18. Virgin America #dc2430 → #7b4397
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-virgin-america.jpg)
19. Instagram #833ab4 → #fd1d1d → #fcb045
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-instagram.jpg)
20. Messenger #00c6ff → #0072ff
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-messenger.jpg)
21. Day Tripper #ff5858 → #f857a6
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-day-tripper-1.jpg)
22. Electric Violet #4776e6 → #8e54e9
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-electric-violet-1.jpg)
23. Pinky #f7bb97 → #dd5e89
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-pinky.jpg)
24. Bloody Mary #ff512f → #dd2476
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-bloody-mary-1.jpg)
25. YouTube #e52d27 → #b31217
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-youtube.jpg)
26. Dimigo #fc6767 → #ec008c
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-dimigo-1.jpg)
27. Mango #ffe259 → #ffa751
![](https://transang.me/content/images/2020/05/gradients-for-photoshop-background-ui-mango.jpg)
This is another collection of non-uniform 25 vector gradients. All vector paths are included in a single file and can be download from here. Following are the previews of them.
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_1.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_2.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_3.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_4.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_5.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_6.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_7.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_8.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_9.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_10.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_11.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_12.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_13.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_14.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_15.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_16.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_17.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_18.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_19.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_20.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_21.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_22.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_23.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_24.jpg)
![](https://transang.me/content/images/2020/05/UnicornVectorGradient_25.jpg)
![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/v2/default-red.png)