Gradients—maybe you love them, maybe you don’t. Either way, they’ve been very popular in the design world for the past few years and it doesn’t look like they’re going anywhere soon. If you can’t already tell by some of our Landing Pages, we love using gradients at Dribbble because not only do they add layers of depth, they give us the freedom to create super custom colors!
In honor of our beloved gradients, we put together a list of five favorite online gradient picking tools. The best part is, they’re all free! We hope you enjoy them as much as we do.
1. Grabient
Grabient was actually created last year by our very own Unfold team here on Dribbble. We love this tool because it’s extremely flexible—you have complete control over the set of gradients in terms of customization. Change the angle, add or remove colors, and even edit how much of each color is displayed.
We’ve been keeping a close eye on the Unfold team’s profile because it looks like they are working on a new landing page for Grabient. It’s looking fantastic and we’re excited for the new site!
2. Gradients Guru
Gradients Guru offers a couple hundred beautiful gradients which you can sort by “cool” (soft, lighter colors) or “strong” (much more saturated colors). What we love is that you can rotate the angle of each gradient with the click of a button and get the exact look you’re going for.
Another helpful feature they have is called “Blend Mode” where you can apply and overlay your chosen gradient to any image. You can then customize the transparency of the gradient over the image and the color variant. When you’re all finished, just click “Download”. Here’s an example:
3. Egg Gradients
Egg Gradients has over 200 gradient combinations to choose from—and yes, the gradients are displayed in the shape of eggs! We love this tool in particular because the gradient names are ridiculously clever (i.e. “Notification from ex” and “John Snow’s funeral” to name a few). If you want to sort through the gradients by color, you can also do that by clicking on your desired hue under the intro statement. To use any of the gradients in your design, just copy and paste the hex codes and replicate the gradient yourself, or simply copy the CSS. Below are a few of our other favorite gradient names.
4. UI Gradients
Head over to UI Gradients and BOOM—you’ll find yourself face-to-face with a great big beautiful gradient. Either copy and paste the hex code or CSS, or download a high-res .jpg file of the gradient. You can even add your own custom gradient to the site using the GitHub instructions under the Add a gradient option. We love how large the display of the gradients are and how easy it is to toggle between them all with your arrow keys. But if you’d rather see all gradients at once, there’s an option for that under Show all gradients.
5. Web Gradients
Another simple tool that saves you loads of time is Webgradients.com, a collection of 180 background gradients. Unlike some of the other tools mentioned here, these gradients aren’t customizable but they’ve already been perfectly curated by the design team who built the app. We love that you can download the full collection for Photoshop and Sketch as ready to use files! So if you’re looking for grab-and-go gradients, this tool will probably be ideal for you.
That’s all—hopefully, these tools come in handy the next time you want to implement a nice gradient into your design. Now, time to play around with each and find out which tool works best for your workflow. We can’t wait to see all of the custom colors you create!
Find more Updates stories on our blog Courtside. Have a suggestion? Contact [email protected].
