Gradients can add a great deal of depth over a flat 1-color design. If your brand has multiple colors in its style guide, you can often blend two colors to create a new look in your app, website, or product. However, good gradients can sometimes be difficult to create. So, here are 3 websites that can supply beautiful gradients for your next project.
This site is easy to navigate with its grid view of ready-made gradients. They offer a high quality PNG file for all gradients, as well as the hex codes below. For developers, the CSS code can be copied as a “background-image” variable. WebGradients has over 180 linear gradients on their site, but they also include a plugin for both Photoshop and Sketch allowing you to integrate them straight into your workflow.
This site takes a more immersive approach to their gradients, loading a fullscreen gradient as soon as you load the page. This allows you to get a much more detailed look at how the gradient, though they do have a similar grid view that can be accessed by click “show all gradients” or pressing the SHIFT key. The hex codes are provided at the top of each page, and developers can copy and paste a “background” variable with support for multiple browsers.
This site is very interactive allowing you to change the direction of the gradient, add or remove colors, and shift the balance between colors. This is all possible in each gradient’s window and you do not need to visit a separate page. Though there are fewer gradients available on this site, they also offer a downloadable Sketch file (which can be accessed via Adobe XD as well) with a canvas of all their gradients. Code is available to developers as well.