Gradient tools ⚒

— 22.02.2018 (⏱ 1 minute)

Last week I’ve found nearly at the same time two tools to easily create nice CSS gradients.


GradPad is a nice, near full-screen, interactive tool to create gradients. There are two large knobs you can use to span the gradient and define the angle.

Then there is sort of a timeline below where you can distribute your color stops on and on top of that define the opacity. Nice!

Screenshot of the GradPad interface.


Grabient basically provides nearly same functionality, except the opacity option, but in a more packaged area where you can choose from different starting points.

Grabient also offering a Sketch file of the initially shown gradients.

Screenshot of the Grabient interface.

So both of them are very nice pages to check out when you need some inspiration or actually want to create some new gradient from a visual point of view.