Color gradients spice up the occasionally boring flat design. Thus, it’s always useful to have a couple of options at hand.
Of course, you can also come up with color mix after color mix on your own, but the following two tools will free you of this creative process, leaving you with more capacity for the actual work. You can also use a combination of both tools. Let’s take a look at them.
WebGradients: 180 More or Less Complex CSS Color Gradients
The project WebGradients by the Russian studio itmeo comes with 180 ready to use CSS gradients. A click on “Copy CSS” copies the required code into the clipboard, from where you can retrieve it via CTRL+V. Clicking the respective color circle directly opens a fullscreen preview of the gradient. The icon with the arrow pointing down starts the download of the gradient as a PNG file.
Additionally, all gradients are available for download as an individual file in a bundle for Sketch and Photoshop. The download is done via Paddle.com. You have to enter a valid email address for the download link to be sent to.
For the gradients, the CSS attribute background-image is used. The definition of a gradient looks like this, for example:
background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
Which would lead to this gradient:
Gradient Buttons By Colorion
Gradient buttons are a subset of the much wider product range of Colorion’s operator. Colorion offers curated color palettes for designers, as well as flat and material design. The service was created by the Slovakian full stack developer Csaba Kissi.
The only difference between WebGradients and Gradient buttons is the fact that the gradients in Gradient buttons are exclusively used for the display of buttons. On top of the gradient definition, a hover effect is added, and the button is finished.
.btn-grad {background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%)}
.btn-grad:hover { background-position: right center; }
As you can tell by looking at the snippet, both tools make a good combination, as gradients not available on Gradient buttons, from WebGradients for example, can easily be realized with the given systematics.
The available Gradient buttons are displayed in a grid on the landing page. The hover effects are immediately executed upon hovering over them with the mouse. Below the individual button, a click on “Get CSS Code” is all it takes to call up the corresponding instruction text. From there, copy the snippet into your clipboard.
Send Comment: